关于css:flex布局

6次阅读

共计 646 个字符，预计需要花费 2 分钟才能阅读完成。

平时个别是设置盒子居中对齐的时候才思考到 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 轴排列 — 每个我的项目程度方向上的宽度是容器宽度，垂直方向上的高度为我的项目理论高度。

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