Flex弹性盒布局
flex弹性布局:之前我们学过浮动和定位设置px值才能进行页面排版,flex会比较方便。它比较弹性。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称“项目”。容器默认存在两根轴,分别为水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
举例子如下:
<style>
*{
margin: 0px;padding: 0px;
}
.box{
border: 2px solid lightcoral;
/* 给父级添加flex 改成弹性盒模型☆*/
display: flex;
/* flex-direction决定主轴的方向(即项目的排列方向) */
/* flex-direction: row设置相对于浏览器网页来看,子盒子以水平方向从左到右排列 默认*/
flex-direction: row;
/* flex-direction: row-reverse设置相对于浏览器网页来看,