flex布局（笔记）

弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。

主轴与交叉轴：弹性容器具有主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。

案例1：

      .box{/* 一般网页开发1200px会用得比较多 */width: 1200px;height: 600px;margin: auto;border: 1px black solid;background-color: rgb(43, 174, 226);}/* 设置成flex容器 */.flex{display: flex;}.item{width: 250px;/* 不设置高度默认被拉伸 */height: 250px;border: 1px black solid;box-sizing: border-box;}

 <div class="box flex"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>

  flex-direction: 改变主轴的位置和方向 默认row 行为主轴 列为交叉轴（一般开发不改变）

  默认： flex-direction: row;

   flex-direction: row-reverse;主轴反转 从右按顺序一开始

    flex-direction: column;现在主轴变为列 行变为交叉轴

     flex-direction: column-reverse;现在主轴变为列反转

下面重点：

不适用于父级里面的多个直系子元素有不同的位置和功能 

只有一行div布局的话 justify-content就够用了

justify-content:在主轴上的对齐方式

justify-content: flex-start;默认在左

 justify-content: center;在主轴上居中 （以前只能自身单个去居中）

   justify-content: flex-end;整个移到最右边

  justify-content: space-around;每个元素自身两边留的空距是一样的 最左最右两侧仅有一边的距离

 justify-content: space-between;两个div之间的空距相同

   justify-content: space-evenly;每个元素自身两边留的空距是一样的 每一个空距都很平均

案例二：再多四个div，如何换行

<div class="box flex just "><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><!-- 再加四个发现元素变小了 默认不会换行 挤不下就平均压缩每一个div大小--><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>

 默认nowrap不换行 换行后 flex每行大小均等分成两份，每行对应一个flex容器，都有各自的主轴和交叉轴（会用就行了）

   flex-wrap: wrap; 默认排列

align-content：align-content用在换行后，行之间的对齐方式以及空距（通常与justify-content配合）

     align-content: center;两行贴在一起居中

  align-content: space-around每行自身两边留的空距是一样的 最左最右两侧仅有一边的距离;

   align-content: space-between;两行之间的空距相同 

   align-content: space-evenly;每个元素自身两边留的空距是一样的 每一个空距都很平均

 

align-content: flex-end;在底部 且两行贴起来了 均分高度失效

   align-content: flex-start;

结果：align-content: space-evenly;justify-content: space-evenly;配合

    align-content: space-evenly;justify-content: space-between;配合

 补充：flex容器里如果三个子元素的宽度的比是3:2:1 如何解决

flex: 比例数字;

 .con-1{flex: 3;background-color: rgba(170, 182, 62, 0.707);}.con-2{flex: 2;background-color: rgb(77, 127, 193);}.con-3{flex: 1;background-color: antiquewhite;}
<div class="box-1 flex" style="width: 1200px;height: 500px;"><div class="con-1">1</div><div class="con-2">2</div><div class="con-3">3</div></div>