前端 第六节 弹性布局

一、布局方式

1.表格布局

• display:table-cell

2.浮动

• 对自身影响，脱离文档流,使元素独立起来并且可以设置宽高
• 对兄弟元素影响，改变兄弟元素布局
• 对父容器影响是造成坍塌

<div class="box">
<span class="left">1234</span><div class="center"></div>
<div class="right">1234</div></div>

3.定位

• 固定布局，使用标准px单位
• 流式布局，使用百分比%

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 两端对齐，中间有空余就分给