项目常用属性

简单编写一下页面

  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>

初始样式

.box {
  height: 800px;
  width: 1000px;
  border: 1px solid #000;
  display: flex;
}
.box .item {
  width: 200px;
  height: 100px;
  border: 2px solid darkgoldenrod;
  background-color: darkcyan;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  color:black
}

效果图

order 定义项目的排列方式 数值越小 排列越往前

order的值是常数

这里让第二个项目的order值为1

  .item:nth-child(2){
     order: 1;
  }

.item里的order为2

    order: 2;

flex-grow 定义子元素的放大比例 默认值为0 会存在剩余空间

这里将项目只保留3个来操作

flex-grow的值为常数 意思是放大几倍

这里将值设为2

flex-grow: 2

ps：flex-grow: 1;时将等分剩余的空间

flex-shrink 缩小比例 默认值为1

这里恢复九个项目

值为常数 0表示不缩小

例如

.item:nth-child(2){
    flex-shrink: 0;
  }

flex-basis:定义项目在主轴上占据空间的大小

值为多少px

这里将项目减少为三个 设置第二个项目的flex-basis

.item:nth-child(2){
    lex-basis: 500px;![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4edd0f4023c7411a9291cfd26d8ea88b~tplv-k3u1fbpfcp-watermark.image)
  }

属性flex

flex:flex: auto;相当于

flex-grow: 1 flex-shrink: 1 flex-basis: auto

flex: none;相当于

flex-grow: 0 flex-shrink: 0 flex-basis: auto

flex:1;相当于

flex-grow: 1 flex-shrink: 1 flex-basis: 0%