likes
comments
collection
share

flex布局

作者站长头像
站长
· 阅读数 35

前言:

平时一般是设置盒子居中对齐的时候才考虑到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布局

注意

  • 只能反转当前行或列的数据
  • 容器默认是左对齐flex-start,反转数据之后仍然想左对齐的话需要设置对齐方式为flex-end

    2. 项目初始大小

    不指定项目盒子大小的话:如果为row轴方向排列---每个项目水平方向上的宽度是项目实际宽度,垂直方向上的高度为容器高度。flex布局如果为column轴排列---每个项目水平方向上的宽度是容器宽度,垂直方向上的高度为项目实际高度。flex布局设置反方向轴线上的排列方式就不会使用容器高度了。

    flex布局

    flex布局

转载自:https://segmentfault.com/a/1190000041323485
评论
请登录