一、布局方式
1.表格布局
2.浮动
- 对自身影响,脱离文档流,使元素独立起来并且可以设置宽高
- 对兄弟元素影响,改变兄弟元素布局
- 对父容器影响是造成坍塌
<div class="box">
<span class="left">1234</span><div class="center"></div>
<div class="right">1234</div></div>
3.定位
4.多列布局
- 父容器上设置行宽column-width: 200px;
5.弹性布局
- display: flex; 弹性盒模型,默认主轴方向是x轴,起始线是左边开始
二、弹性布局的定义方式
1.定义方式
- display: flex; 弹性盒模型,默认主轴方向是x轴,起始线是左边开始
- flex-direction 改变主轴方向,row x轴为主轴,colum y轴为主轴
- row-reverse 起始线从右边开始
- colum-reverse 起始线从下到上
- flex-wrap: wrap;子元素在父容器中换行 flex-wrap: nowrap; 不换行
- flex-folw: 主轴 换不换行 ; 综合属性
- justify-content: ;设置子元素在父容器中主轴的排列位置 space-between 两端对齐,中间有空余就分给