CSS布局——Flexbox基础使用

基础概念

Flexbox布局的概念

Flexbox布局是一种布局的模式，用来在一个维度上为项目设置布局

容器

在HTML中大多数元素例如div、ul、main块元素，span、em、i行内元素都可以作为Flex容器，它的作用是开启一个Flex布局模式，你只需要在元素上面设置display: flex即可开启一个Flex布局容器。

项目

当开启一个Flex布局的时候，容器中的一个个元素::before、::after、文本、dom元素就是项目，这些项目是容器的子元素，他们之间是父子关系，子元素也可以开启自己独立的Flex布局，他不会继承父元素的flex属性。

<div class="container">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>
<!-- 开启Flex布局 -->
.container {
  display: flex; 
  width: 300px;
  height: 200px;
  background-color: #8a8282;
}

主轴、侧轴

在Flex中容器有两个轴分别是主轴和侧轴，默认情况下主轴沿着行的方向分布，侧轴沿着列的方向分布。有一点需要注意，主轴和侧轴的方向并不是固定不变的而是要受到flex-direction和writing-mode或者direction 阅读模式的影响

容器大小：主轴尺寸、侧轴尺寸

Flex容器的大小是由主轴尺寸或者侧轴尺寸决定的，主轴的尺寸：主轴开始位置到主轴结束位置的距离，侧抽尺寸：侧轴的开始位置到侧轴的结束位置的距离。

flex-direction控制项目的方向

flex-direction属性用来控制主轴上项目的排布方向，默认是row即按照行内的方式在一行排列，如果想让元素按照块的方式在一列显示则可以设置flex-direction: column``row-reverse和column-reverse可以使主轴（或者侧轴）的起点和终点位置互换

flex-wrap控制项目换行

flex-wrap用来控制项目的换行，默认情况下是不换行的flex-wrap: nowrap，即使项目已经溢出容器了它也保持一行排列，如果想让容器中的项目在一行容纳不下后进行强制换行显示可以设置flex-wrap: wrap,wrap-reverse也会让项目换行只不过他的方向是相反的，例如wrap会让换行元素排列到下一行，而wrap-reverse会让换行元素排列到当前行的上一行去，如下👇

<style>
.container {
    width: 400px;
    background-color: #ddb6d8;
    display: flex;
    gap: 10px;
    border: 1px solid #0a57e7;
    flex-wrap: wrap-reverse;
}
.container div{
    width: 100px;
    height: 100px;
    background-color: #c9df0b;
    text-align: center;
    line-height: 100px;
}
</style>
<div class="container">
    <div>itm1</div>
    <div>itm2</div>
    <div>itm3</div>
    <div>itm4</div>
</div>

order 项目排序

order属性是设置在容器中项目上面的，可以用来为项目进行排序，order的值越小当前元素越排在最前面，可以是正值也可以是负值。如果遇到两个order值相同的元素会按照实际文档上的顺序进行排列

gap项目之间的间距

gap用来设置项目之间的间距，只需要在flex容器上设置gap属性即可，接收两个值，如果只设置一个值的话，那么第二个值和第一个值等同，如果两个值都设置了，第一个值是row-gap行的间距，第二个则是column-gap列的间距