Day11:Flex布局

参考：
来源：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

网页布局是css的一个重点。

盒子模型

display属性
position属性
float属性

W3C提出了一种新的方案—-Flex布局

弹性布局
任何一个容器都可以指定为Flex布局

.box{
  display: flex;
}

行内元素也可以使用Flex布局

.box{
  display: inline-flex;
}

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

设为Flex布局
子元素的float、clear和vertical-align属性

image image.png

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性决定主轴的方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

image image.png

flex-wrap属性
默认情况下，项目都排在一条线
如果一条轴线排不下，就换行

image

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行

image

wrap：换行，第一行在上方

image

wrap-reverse：换行，第一行在下方

image

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

默认值为row nowrap

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content属性定义了项目在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

image image.png

align-items属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

image image.png

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

image image.png

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item {
  order: <integer>;
}

image

flex-grow属性定义项目的放大比例
默认为0，即如果存在剩余空间，也不放大

.item {
  flex-grow: <number>; /* default 0 */
}

image

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

.item {
  flex-shrink: <number>; /* default 1 */
}

image image.png image.png

---

请点赞！因为你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群