css布局 弹性布局介绍 以及 flex容器属性

弹性布局

语法:

display: flex;

    设置弹性布局需要注意的四点:

        1. 当给一个元素设置了 display: flex; 后，该容器就成为了弹性盒;

        2. 当容器设置了 flex 后，子元素的 float、clear、vertical-align 将会失效;

        3. 我们把设置 display: flex; 的元素称之为 flex 容器，把里面的子元素称为 flex 项目;

        4. 当给元素设置了 flex 布局后，随之产生两根轴线:主轴和交叉轴。

flex容器属性

1. 设置主轴的方向

    语法:

flex-direction: row | row-reverse | column | colum-reverse;

    ① row: 默认值，主轴在水平方向，起点在左端

    ② row-reverse: 主轴在水平方向，起点在右端

    ③ column: 主轴在垂直方向，起点在上沿

    ④ column-reverse: 主轴在垂直方向，起点在下沿

2. 设置了 flex 项目一行显示还是多行显示

    语法:

flex-wrap: nowrap | wrap | wrap-reverse;

    ① nowrap: 默认值，flex 项目在一行显示，不换行

    ② wrap: 换行

    ③ wrap-reverse: 换行，行的顺序会倒过来

    注:  此属性主要用在主轴在水平方向时，flex 项目一行放不下，又不希望 flex 项目缩小。

3. flex-direction 和 flex-wrap 的简写方式

    语法:

flex-flow: row nowrap;

4. 设置主轴的对齐方式

    语法:

justify-content: flex-start | flex-end | center | space-between | space-around;

    ① flex-start  类似于左浮动

    ② flex-end 类似于右浮动

    ③ center  flex项目居中对齐

    ④ space-between 两端对齐容器，flex 项目间距相等

    ⑤ space-around  flex项目两侧间隔相等

5. 设置交叉轴的对齐方式

    语法:

align-items: flex-start | flex-end | center | baseline | stretch;

    ① flex-start 对齐交叉轴的起点

    ② flex-end 对齐交叉轴的终点

    ③ center 以交叉轴为参考，居中对齐

    ④ baseline  flex项目第一行文字基线对齐

    ⑤ stretch 如果flex项目没有定义高度或为auto，将占满整个父元素的高度

    注: 如果flex项目没有设置高度，align-items的默认值就为strech

6. 设置多根轴线对齐方式

    语法:

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    ① flex-start 对齐交叉轴的起点

    ② flex-end 对齐交叉轴的终点

    ③ center 以交叉轴为参考，居中对齐

    ④ space-between 交叉轴两端对齐，轴线间隔相等

    ⑤ space-around  flex项目（沿交叉轴方向）之间的间隔相等

    ⑥ stretch  flex项目没有设置高度或为auto，将占满整个父元素的高

    注: 当只有一根轴线时，该属性不起作用

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓