html5 2种布局模式
1.如何让子元素在父元素中上下左右居中?
- 定位 + 拉取 (子元素固定大小)
- margin:auto + position的上下左右0
- 定位 + 位移50%
- flex弹性
2. 弹性布局?
两部分:
1. 语法是添加到父容器上的?
display : flex;
flex-direction: row; 布局的排列方向 (主轴排列方向)
row 默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的
flex-wrap : nowrap; 是否进行换行处理。
nowrap; 默认值,不换行处理
wrap; 换行处理
wrap-reverse; 反向换行
flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
flex-start : 子项都去起始位置对齐。
flex-end : 子项都去结束位置对齐。
center : 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。
align-items : 每一行中的子元素上下对齐方式。
flex-start;
center;
flex-end;
align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果,因为他是多行的一个上下对齐方式)
默认:多行下,有几行就会把容器划分为几部分,默认就是stretch拉伸的。
值跟justify-content取值是相同的。
1.弹性布局
<style>
/* #box1{ width:300px; height: 300px; border:1px black solid; margin:100px; display: flex;}
#box1 div{ width:50px; height:50px; line-height: 50px; text-align: center; color:white; background:red;} */