CSS-day10

一、display:flex;（伸缩盒布局）

（1）使用场景：弹性伸缩比例、自动留白间隙、手机端

（2）以x轴方向对齐，x轴叫做主轴，y轴叫做交叉轴；反之亦然。

（3）flex容器样式主要修饰的地方：排列方式、自动换行、排列方式（主轴和交叉轴的对齐方

式）。

flex元素样式主要修饰的地方：宽高固定、宽高伸缩比例。

（4）：flex-direction:row;（列布局）：形成一行多列的场景，flex指定的值为宽的最小值。

flex-direction:column;（行布局）：形成一列多行的场景，flex指定的值为高的最小值。

（5）flex中，对元素样式修饰的速写分别表示：

lex-grow(拉伸时的比例)/flex-shrink(压缩时的比例)/flex-basis（最小宽度/高度）

flex:1 2 200px;

flex:1 200px; 伸缩比例都为1

flex;1; 拉伸，压缩比例

flex:200px;/width:200px;(固定宽度)

（6）flex中，对容器样式修饰的速写：

.one {

display: flex;

flex-direction: row;

flex-wrap: wrap; /*自动换行,达到了设定宽的最小值*/

flex-flow: row wrap; /*速写*/

}

（7）flex中默认的样式值：

flex-direction:row;

justify-content:flex-start;

flex-wrap:nowrap；

（8）对元素样式的修饰：

flex-wrap: wrap-reverse;行上下颠倒顺序

justify-content: flex-start/flex-end/center;左对齐、右对齐、居中对齐

justify-content: space-around;左右平均分配间隙，

justify-content: space-between;两端对齐，中间平均分配间隙

align-items: stretch;默认在交叉轴的对齐方式：拉伸