前言:

平时个别是设置盒子居中对齐的时候才思考到flex。然而flex用途必定不止这点,本文是具体理解flex之后的一些思考。

1. 巧用flex的direction

direction是容器属性,能够设置容器的轴线方向。
当想实现反转我的项目内容的时候,能够用row-reverse或column-reverse设置反方向。
html

<div class="flex-box">  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div></div>

css

.flex-box {    width: 200px;    height: 200px;    display: flex;    flex-flow: row-reverse nowrap;    justify-content: flex-end;    background-color: skyblue;  }.flex-box div {    border: indigo 1px solid;  }

留神

  • 只能反转以后行或列的数据
  • 容器默认是左对齐flex-start,反转数据之后依然想左对齐的话须要设置对齐形式为flex-end

    2. 我的项目初始大小

    不指定我的项目盒子大小的话:
    如果为row轴方向排列---每个我的项目程度方向上的宽度是我的项目理论宽度,垂直方向上的高度为容器高度。

    如果为column轴排列---每个我的项目程度方向上的宽度是容器宽度,垂直方向上的高度为我的项目理论高度。

    设置反方向轴线上的排列形式就不会应用容器高度了。