Flex 布局知识点梳理

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月26日15:11:20 评论 430

传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等。自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理。

什么是 Flex

Flex 是 Flexible Box 的缩写,意为”弹性布局”,任何一个容器都可以指定为Flex布局。设为 Flex 布局以后,子元素的 floatclearvertical-align属性将失效。要设置一个元素采用 flex 布局,只需设置器 display 属性取值为 flex 即可。

.flex-box{
    display:flex;     /* or inline-flex*/
}

常用术语

采用 Flex 布局的元素,称为Flex容器。其子元素为flex item,本文称其为”项目”。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。

  1. flex container : Flex容器,简称 容器
  2. flex item : Flex容器的子元素,可称其为 flex 项目,简称 项目
  3. main axis : 主轴, 水平轴,起始位置称为 main start,结束位置称为 main end
  4. cross axis: 交叉轴, 垂直轴,开始位置叫做 cross start,结束位置叫做 cross end

项目默认沿 main axis 排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器的属性

  1. flex-direction :flex-direction属性决定主轴的方向(即项目的排列方向)。
    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。
  2. flex-wrap: 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
    • nowrap(默认):不换行。
    • wrap:换行,第一行在上方。
    • wrap-reverse:换行,第一行在下方。
  3. flex-flow : flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
    CSS .box { flex-flow: <flex-direction> || <flex-wrap>; }
  4. justify-content: justify-content属性定义了项目在主轴上的对齐方式。
  5. align-items: align-items属性定义项目在交叉轴上如何对齐。
  6. align-content: align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目的属性

  1. order 定义项目的排列顺序,数值越小越靠前
  2. flex-grow 定义项目的放大比例
  3. flex-shrink 定义项目的缩小比例
  4. flex-basis 定义在分配多余空间之前,项目占据的主轴空间
  5. flex 是 grow shrink basis 的简写。取值 none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  6. align-self 定义当前项目的对其方式。取值 auto | flex-start | flex-end | center | baseline | stretch

写在后面

本文地址:https://www.cnblogs.com/kelsen/p/8647896.html

如果您有任何建议或疑问请在下面留言交流。

im, 无色
  • 本文由 发表于 2019年7月26日15:11:20
HTTP/2及HTTP/3特性 前端开发

HTTP/2及HTTP/3特性

HTTP/2及HTTP/3特性 摘要: 学习 HTTP/2 与 HTTP/3。 前言 HTTP/2 相比于 HTTP/1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性...
HTTP/3笔记 前端开发

HTTP/3笔记

HTTP/3将标准化。作为一个老协议人,我想我会写一些评论。 谷歌(pbuh)拥有最受欢迎的网络浏览器(Chrome)和两个最受欢迎的网站(#1 Google.com#2 Youtube.com)。因...
HTTP/3起源 前端开发

HTTP/3起源

原文地址:HTTP/3: From root to tip 原文作者:Lucas Pardue 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-mine...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: