1:水平方向均分 父元素设置 display:flex; 子元素设置 flex:1; 此时对子元素设置宽度不会起作用
.container{
width: 500px;
height: 500px;
background: #ccc;
margin: 0 auto;
display: flex;
}
.box{
flex: 1;
width: 100px;
height: 100px;
}
<div class="container">
<div class="box color1">1</div>
<div class="box color2">2</div>
<div class="box color3">3</div>
</div>
对于html代码 在下面不在进行重复书写
2:水平方向排列 flex-direction 依次对于下面样式图片
.container{
display: flex;
/* row column row-reverse column-reverse 控制水平垂直方向 */
flex-direction: row;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
}
.box{
width: 100px;
height: 100px;
}
3:假如我们需要在reverse的情况下 顶部开始排列的话 就需要 justify-content
.container{
flex-direction: column-reverse;
justify-content: flex-end;
/**
justify-content 属性值
flex-start :项目位于容器的开头。
flex-end :项目位于容器的结尾。
center :项目位于容器的中心。
space-between :项目位于各行之间留有空白的容器内。
space-around :项目位于各行之前、之间、之后都留有空白的容器内。
initial :设置该属性为它的默认值。
inherit :从父元素继承该属性。
*/
}
4:水平垂直居中
/**
主轴 和 交叉轴问题
关于主轴的定义是根据 flex-direction的 row column 来进行定义的额
属性值为row 主轴为水平方向
属性值为column 主轴为垂直方向
justify-content 指的是主轴方向的对齐方式
align-items 交叉轴方向的对齐方式
*/
.container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.container{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}