flex布局
1.小黄鸭代码调试法
2.阿里图标
3.flex布局(弹性和模型)
flex是当前较为主流的布局方式-->它布局起来更加方便,可以去掉float-->float一开始不是用来布局的
用布局的元素称为flex的容器,它里的内容称为容器项目/flex
项目:父级:容器 子集:项目
flex布局原理:就是通过两条轴,把网页分割为一行行/一列列
flex主轴是从左向右,flex副轴是从上到下,默认情况是左右水平布局。
flex三要素:
1.主轴的方向(你是要左右水平布局/上下垂直布局)
2.主轴的对齐方式
3.副轴的对齐方式
flex的使用方法:
display:flex;
flex样式说明:
设置主轴方向(决定左右/上下布局):flex-direction
语法:flex-direction:row/colume/row-reverse/column-reverse
row:行,默认属性,从左到右
column:列,从上往下
row-reversse:行反转,从右到左
column-reverse:列反转,从下到上
设置主轴对齐方式:justify-content:start/end/space-around/space-between
flex-start:默认,按照起点对齐,左/上
flex-end:按照终点对齐
space-around:均分对齐
space-between:两端对齐
设置副轴对齐方式:align-items:center/flex-start/flex-end
center:居中
flex-start:靠起点
flex-end:靠终点
设置换行,flex自带缩放功能,如果你不想要可以设置:flex-wrap属性:
no-wrap:默认,不换行
wrap:换行
flex项目属性:
order:项目的顺序,数值越小,排序越靠前,默认是0;一定要是数值,不是像素。