第二遍回顾--①前端flex布局

1.flex: 弯曲，收缩

2.概念 2条主轴，main axis,cross axis; 每个单元为flex item，主轴空间main size，交叉轴空间cross size;

3.容器

.container{

　　　　display: flex | inline-flex;

}

块状元素用flex；行内元素用inline-flex;

使用之后，子元素的float、clear、vertical-align属性会失效。

a. flex-direction 决定主轴方向

row 水平为主轴方向，起点在左端；(类似于左浮动)

row-reverse 水平为主轴方向，起点在右端；(类似于右浮动)

column 垂直为主轴方向，起点在顶端；

column-reverse 垂直为主轴方向，起点在底端；

b. flex-wrap 决定容器内是否可换行

wrap 换行，第一行在上面

nowrap 不换行，自动调整宽度，显示在一行里面。

wrap-reverse 换行，第一行在下面

c. flex-flow 是flex-direction和flex-wrap的简写形式

d. justify-content 定义了项目在主轴方向上的对齐方式

flex-start 在主轴方向上头部对齐

flex-end 在主轴方向上尾部对齐

center 在主轴方向上居中

space-between 剩余空间在主轴方向上等分(优秀)

space-around 每个项目的两端间隔相等(优秀)

e. align-items 定义了项目在交叉轴上的对齐方式

stretch（默认）如果item没有设置高度，就铺满容器

flex-start 在交叉轴方向上，头部对齐(容易出效果)

flex-end 在交叉轴方向上，尾部对齐(容易出效果)

center 居中交叉轴的中点对齐(容易出效果)

baseline 以项目中的第一行文字的底部基线对齐

f. align-content 定义了多根轴线的对齐方式(如果容器只有一根轴线，此属性将不起作用，当flex-warp: warp 时，可能会出现多条轴线，默认为stretch)

(每条轴线的项目默认也是stretch,如果项目设置的高度优先级高于stretch。)

flex-start 轴线在交叉轴的头部对齐

flex-end 轴线在交叉轴的尾部对齐

center 轴线在交叉轴的中间对齐

space-between 剩余空间等分为间隙

space-around 每个轴线两侧的距离相同

4. Flex的项目属性

a. order 定义项目在容器内的排列顺序，数值越小越靠前，支持负数，默认为0。

b. flex-basis 定义了在分配多余空间之前，项目占据的主轴空间(默认值auto，即取决于自定义的宽度和高度，如果水平方向为主轴，当设置后，项目自身的宽度失效。一般这个属性配合flex-grow,flex-shrink使用)

c. flex-grow 定义项目的放大比例，默认是0，即存在剩余空间也不放大。如果都为1，则等分剩余空间。如果其中一个为2，别的为1，则比其他大一倍。

d. flex-shrink 定义了项目的缩小比例，默认是1，即空间不足，该项目将缩小，负值无效。如果某个项目该属性为0，则空间不足时，它不缩小。

e. align-self 定义当前项目的对齐方式，会覆盖align-items的设置，默认是auto，继承父级设置，如果没有父级，则为stretch。

flex-start

flex-end

center

baseline

stretch

巴特西

第二遍回顾--①前端flex布局

最新文章

热门文章