Flex布局详解（二）

2、flex item的属性：

（1）、flex-grow 增长比例（空间过多时）
（2）、flex-shrink 收缩比例（空间不够时）
（3）、flex-basis 默认大小（一般不用）
（4）、flex 上面三个的缩写
（5）、order 顺序（代替双飞翼）
（6）、align-self 自身的对齐方式

（1）、flex-grow
HTML

<div class="parent">
    <div class="child">3sdfasfasa</div>
    <div class="child">4234dfswed</div>
    <div class="child">wewesdsdfds</div>
  </div>

CSS

.parent{
  background:#ddd;
  display:flex;
}
.child{
  height:50px;
  background:white;
  margin:1px;
}

未加flex-grow属性效果图

在上面CSS中加上下面这句，意思就是将多余空间全部分配到第一个item中。数字大于1就是全部分配某个item上。

.child:nth-child(1){
  flex-grow:1
}

将多余空间分配给第一个item

上面CSS中改成下面这句，意思就是将多余空间按照比例2:1:3分配到这三个item中。

.child:nth-child(1){
  flex-grow:2
}
.child:nth-child(2){
  flex-grow:1
}
.child:nth-child(3){
  flex-grow:3
}

多余空间按2:1:3进行分配到item中

（2）、flex-shrink
将增长比例CSS代码改成下面的

.child:nth-child(1){
flex-shrink:2;
}
.child:nth-child(2){
  flex-shrink:1;
}
.child:nth-child(3){
 flex-shrink:5;
}

收缩前

按比例2：1：5收缩后

（3）、flex-basis
CSS

.parent{
  background:#ddd;
  display:flex;
  width:300px;
}
.child{
  height:80px;
  background:white;
  margin:1px;
}
.child:nth-child(1){
  flex-basis:300px;
}

变化前

变化后

flex-basis时默认值大小，我们可以改变它的值优先分配大小。
（4）、flex
CSS

.parent{
  background:#ddd;
  display:flex;
  width:300px; 
}
.child{
  height:80px;
  background:white;
  margin:1px;
}
.child:nth-child(1){
  flex:1 2 300px;   //涨的时候吃一份，缩的时候缩两份，原始大小是100px
}

8.png

flex 是三个flex-grow 、flex-shrink、flex-basis三个缩写形成，三个值按顺序进行编写。
（5）、order 顺序（代替双飞翼）
CSS

.parent{
  background:#ddd;
  display:flex;
  width:300px;
}
.child{
  height:50px;
  width:100px;
  background:white;
  margin:1px;
}

order前效果

在上述CSS加上下面代码（order）

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

order后效果，item中1和3位置互换了

（6）、align-self 自身的对齐方式
HTML

  <div class="parent">
    <div class="child">
      11111 <br>
      1111 <br>
      111 <br>
      11 <br>
      1 <br>
    </div>
    <div class="child">
      2 <br>
      2 <br>
      2 <br>
    </div>
     <div class="child">3</div>
  </div>

CSS

.parent{
  background:#ddd;
  display:flex;
  width:400px;
  justify-content:space-around;
  align-items:flex-start;
}
.child{
  width:80px;
  background:white;
  margin:1px;
}

1.png

在上述CSS中加上下面这句代码，其中align-self常用的属性值有center、flex-start、flex-end

.child:nth-child(3){
  align-self:center;  //属性值改变时如下图所示变化
}

值为center时，第三个item变化

值为flex-start时，第三个item变化

值为flex-end时，第三个item变化

最后编辑于：2020.11.08 23:27:33