弹性盒子

Posted 2020-09-27 乜**乜

弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的?一种新的布局?方式。

弹性盒子的特点：1.任何?一个容器?都可以指定为?ex布局。

                             2.?行行内元素也可以使?用?ex布局。

                             3.webkit内核的浏览器?，必须加上-webkit-前缀。

弹性盒子的意义：采?用?ex布局的元素，称为?ex容器?（?ex container），简称“容器?”。它的所有?子元素?自动成为容器?成员，称 为?ex项?目（?ex item），简称“项?目”。

容器?默认存在两根轴：?水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做 main start （主轴起始），结束位置叫做 main end （主轴结束）；交叉轴的开始位 置叫做 cross start （交叉轴起始），结束位置叫做 cross end （交叉轴结束）。
项?目默认沿主轴排列列。

弹性盒子属性：1. ?ex-wrap属性 默认情况下，项?目都排在?一条线上（?又称“轴线”）上。 flex-wrap 属性定义，如果?一条轴线排不不下， 如何换?行行。

row（默认值）：主轴为?水平?方向，起点在左端； row-reverse：主轴为?水平?方向，起点在右端； column：主轴为垂直?方向，起点在上沿； column-reverse：主轴为垂直?方向，起点在下沿。

                         2. flex-flowflex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值 为 row nowrap 。

nowrap（默认值）：不不换?行行（强?行行挤压，平均分配宽度）； wrap：换?行行，第?一?行行在上?方（从上往下?一次排列列）； wrap-reverse：换?行行，第?一?行行在下?方（从下往上?一次排列列）；

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

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

flex-start（默认值）：左对?齐 flex-end：右对?齐 center： 居中 space-between：两端对?齐，项?目之间的间隔都相等。 space-around：每个项?目两侧的间隔相等。所以，项?目之间的间隔?比项?目与边框的间隔?大?一倍。