CSS – Flex

前言

读完 W3schools 以后, 现在进入单独学习. 就留着呗.

参考:

CSS Flexbox

Flex Concept

有用过 Figma 的 Auto Layout 就可以体会到 Flex 的玩法.

当有几个 item (div), 我们想 group 起来排成直线, 横线, 左右隔离 (平均分布) 的时候, 用 Flex 在合适不过了. 

需要注意的是它是 one direction, 如果选择横 (horizontal, row) 那么就不能直 (vertical, column)了. 只能在外面 wrap 多一层.

Flex 并不能满足所以排版需求, 如果需要 two direction 的话, 用 Grid 会更恰当. 切记 Flex 和 Grid 不是互相替代的. 它们有各自的强项. 不要想一招打天下哦.

Flex 结构

Flex 的 HTML 结构长这样, 1 个 container 抱着许多 item.

<div class="flex-container">
  <div class="flex-item">item 1div>
  <div class="flex-item">item 2div>
  <div class="flex-item">item 3div>
div>

只有 first layer 的 child 才是 flex item, 被 flex 控制.

Flex Container

flex-direction

.flex-container {
  display: flex;
  flex-direction: row;
  width: 200px;
  border: 2px solid black;
}

设置 display: flex 以后, 第一步就是选方向. 

默认是 row (horizontal 横向)

效果:

虽然里面的 div 是 display block, 但是经过 flex 处理, 它就往横向走了.

flex-direction: column; 就和 display block 一个样子.

flex-wrap

wrap 是设置当 container 装不下 item 的时候要如何处理. 默认值是 nowrap.

假设 container width: 100px;

item3 跑出去了, 通过设置 flex-wrap: wrap 效果如下:

item3 没有跑出去, 反而是往下掉了. 这个在做 RWD (Responsive Web Design) 超实用的.

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的 shorthand.

flex-flow: row wrap;

justify-content

justify-content 是用来做 alignment 的. 有点像 Figma 的这个

注: align 的前提是要有空间, 通常 container 的 width, height 不是 hug content, 或者 item 的 width, height 宽度/高度不一致, 不然没有空间, align 毛啊.

justify-content 调整的方向和 direction 的方向是一致的, 比如 direction 是 horizontal, 那么 justify-content 调整的就是左右.

前面 4 个是比较常用到的. 通常是写 flex-start 而不是 left 或 start, 虽然 chrome 都能接受.

align-items

align-items 的默认值是 stretch 伸缩的意思.

container height 50px, item height auto 的情况下

baseline 通常用于对齐字体, 如果字体一样的话, 它的效果和 flex-start 是一样的.

align-content

align-content 和 align-items, justify-content 差不多玩法, 

首先它只能用于 flex-wrap:wrap 的情况下, nowrap 情况下, align-content 是无视的.

当 item 超过 container, item 会被 wrap 成多排, 可以把这 2 排想象成 2 个 item, 所以它也能类似 justify-content 那样做 space-between

Flex 和 item height 100%

相关参考:

How can I make Flexbox children 100% height of their parent?

Percentage Heights in Flexbox

height auto 表示 hug content (Figma 术语), 依据内容高. 

height 100% 表示 fill container (Figma 术语), 依据 parent 高

在没有 flex 的情况下, 如果 parent height auto, child height 100% 

那么这个 parent 会因为 child 100% 也变成 100%, 高度会变大.

但在 flex 的情况下则不会这样.

container height auto, item 100% = 没任何效果.

item1 height 100%, container height auto, item2 height 100px

看吧, item1 没有 100% 丫.

如果只是 item1 100%, container, item2,3 auto. 那也是直接无视.

所以要做到 container hug content, item fill container, 那么要用到 stretch. 

item1 self-align: stretch 就可以了.

不过如果想搞 height 70% 这种就暂时还不会...

Flex Item

接下来的讲解, 假定 flex-direction 是 row.

Order

顾名思义, 用来修改 element 顺序, 动态排版呢

flex-grow

flex 通常用来做 RWD. 所以很多时候都是用比例来做 width 的

假设 container 1000px

item1 = 1 / (1+1+8) = 10% = 100px

item2 = 100px

item3 = 800px

按比例分配. 

注: 它分配的是剩余的空间哦.

假设 item3 是 100px, 那么剩余的空间是 900px

item1 = 1 / (1+1) = 50% = 450px

item2 = 450px

item3 = 100px

Inline Flex

如果想让 container hug content width (direction: row) 的话就需要用到 inline flex.

(新)CSS

相关

标签