flex布局快速入门

原文链接 : https://lz5z.com/FlexLayoutLearning/

什么是 flex 布局

传统布局的核心是盒子模型,依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左对齐,右对齐这样的功能,可以说,传统布局更适合于文字排版。

flex 是 flexible Box 的缩写,可以看做弹性的盒子模型。

flex 用法

使用 flex 首先要设置父元素 display: flex。任何元素都可以指定为 flex 布局:

块状元素:

.box {
    display: flex;
}

行内元素

.box {
    display: inline-box;
}

设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。

flex 两个基本概念

flex 的核心的概念就是 容器 和 。容器包括外层的 父容器 和内层的 子容器,轴包括 主轴 和 交叉轴,如下图所示:

flex布局快速入门_第1张图片

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做 main start,结束位置叫做 main end;交叉轴同理,子容器默认沿主轴排列。单个子容器占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。

容器具有这样的特点:父容器可以统一设置子容器的排列方式,子容器也可以单独设置自身的排列方式,如果两者同时设置,以子容器的设置为准。

父容器

父容器一共有6个属性: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

flex-direction 属性决定主轴的方向

Untitled

flex-wrap 决定子容器是否换行排列

Untitled

flex-flow

flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap

justify-content 设置子容器在主轴上的对齐方式

Untitled

align-items 设置子容器沿交叉轴的对齐方式

Untitled

子容器

子容器一共有6个属性: order, flex-grow, flex-shrink, flex-basis, flex, align-self

order 改变子容器的排列顺序

默认值为 0,可以为负值,数值越小排列越靠前。order 只能为整数。

Untitled

flex-grow 定义子容器如何瓜分剩余空间

默认值为 0,就是即使存在剩余空间,也不瓜分。如果定义了非 0 值,则按照比例瓜分。flex-grow 只能为整数。

Untitled

flex-shrink 定义了子容器的缩小比例。

默认为1,即如果空间不足,则子容器将缩小。如果所有子容器的 flex-shrink 都为1,当空间不足时,都将等比例缩小。如果某个子容器的 flex-shrink 为0,其他子容器都为1,则空间不足时,前者不缩小。

Untitled

flex-basis 用来改变子容器占据主轴空间的大小

表示在不伸缩的情况下子容器占据主轴空间的大小,默认为 auto,表示子容器本来的大小。

flex

flex-grow, flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto

align-self 用来覆盖父容器的 align-items 属性

align-self 属性允许单个子容器有与其他子容器不一样的对齐方式,默认值为auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。改属性的取值与 align-items 相同。

Untitled

参考资料

  1. MDN CSS Flexible Box Layout
  2. Flex 布局教程:语法篇

你可能感兴趣的:(软件研发,css,flex,html,python,css3)