flex是当前较为主流的布局方式 --> 它布局起来更加方便.取代float的作用 --> 浮动布局有缺陷,会脱离文档流.可能会导致布局崩塌.
用flex布局的元素称为flex容器. 它里面的子元素称为容器项目/flex项目
flex布局原理: 就是通过两种轴.把网页分割成一行行/一列列
flex主轴是从左往右. 副轴从上往下
flex的使用:
display:flex;
flex样式说明:
设置主轴的方向: flex-direction
row; # 行.默认属性,从左到右
column; # 列.从上往下
row-reverse; # 行反转,从右往左
column-reverse; # 列反转,从下往上
设置主轴的对齐方向: justify-content
flex-start; # 默认值。按照起点对齐。左、上
flex-end; # 终点对齐。右、下
space-between; # 两端对齐
space-around; # 均分布局
设置副轴的对齐方式: align-items
center; # 居中
flex-start; # 靠起点
flex-end; # 靠终点
设置换行(如果主轴装不下内容): flex-wrap
no-wrap; # 缩放不换行
wrap; # 换行
flex项目属性:
order: 项目的顺序.数值越小.排列越靠前.默认为0
flex布局
最新推荐文章于 2024-08-10 17:13:35 发布