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

2024年04月09日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客


弹性布局

语法:

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,将占满整个父元素的高

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


本文链接:http://so.lmcjl.com/news/1565/

展开阅读全文