（待补充）CSS进阶--flex布局

邓知微
350 阅读5分钟

速记

  1. 容器的属性（display: flex;）
    • flex-direction 主轴的方向，即项目的排列方向
      • row 主轴为水平方向，起点在左端
      • row-reverse 主轴在水平方向，起点在右端
      • column 主轴在垂直方向，起点在上方
      • column-reverse 主轴在垂直方向，起点在下方
    • flex-wrap 换行相关
      • nowrap 不换行
      • wrap 换行，第一行在上方
      • wrap-reverse 换行，第一行在下方
    • flex-flow flex-direction和flex-wrap的简写
    • justify-content 项目在主轴上的对齐方式
      • flex-start 左对齐
      • flex-end 右对齐
      • center 居中
      • space-between 两端对齐
      • space-around 每个项目两侧的间隔相等
      • ...其他
    • align-items (项目在交叉轴上如何对齐)
      • flex-start 交叉轴的起点对齐
      • flex-end 交叉轴的终点对齐
      • center 交叉轴的中点对齐
      • baseline 项目的第一行的文字的基线对齐
      • stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。
    • align-content (多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用)
      • flex-start：与交叉轴的起点对齐。
      • flex-end：与交叉轴的终点对齐。
      • center：与交叉轴的中点对齐。
      • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
      • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
      • stretch（默认值）：轴线占满整个交叉轴。
  2. 项目的属性
    • order 属性定义项目的排列顺序。
      • 数值越小，排列越靠前，默认为0
    • flex-grow 属性定义项目的放大比例
      • 默认为0，即如果存在剩余空间，也不放大
    • flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
      • 不能是负值
    • flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）
      • 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
    • flex 是flex-grow/flex-shrink/flex-basis的缩写
    • align-self (允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性)
      • auto 表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
      • 其他都与align-items属性完全一致
      • flex-start
      • flex-end
      • center
      • baseline
      • stretch

目录

  1. flex 之前
  2. flex 来了
  3. 基本概念
  4. flex container 的六个属性
  5. flex item 的六个属性
  6. 例子
  7. 参考

flex 之前

我们用什么布局？主要使用

  • normal flow（正常流，也叫文档流）
  • float + clear
  • position relative + absolute
  • display inline-block
  • 负 margin
    flex 之前

flex 来了

一种新的布局方式——Flex 布局

  1. 块级布局侧重垂直方向、行内布局侧重水平方向，flex 布局是与方向无关的。
  2. flex 布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）
  3. flex 布局适用于简单的线性布局，更复杂的布局要交给grid 布局

基本概念

父元素叫做flex container，子元素叫做flex item

基本概念

在父元素上面加上display: flex;就可以开启flex布局。

flex container 的属性

  • flex-direction 方向
        row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。
  • flex-wrap 换行
        nowrap（默认）：不换行。
    wrap：换行，第一行在上方。
    wrap-reverse：换行，第一行在下方。
  • flex-flow 上面两个的简写
  • justify-content 主轴方向对齐方式
        flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  • align-items 侧轴对齐方式
        flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  • align-content 多行/多列内容对齐方式（用的较少）
        flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。

flex item 的属性

  • order 顺序（代替双飞燕）
        order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow 增长比例（空间过多时）
        flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink 收缩比例（空间不够时）
        flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis 默认大小（一般不用）
        flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  • flex 上面三个的缩写
        flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  • align-self 自身的对齐方式
        align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

例子

  1. 手机页面布局
  2. 产品列表
  3. PC页面布局
  4. 完美居中

参考

阮一峰flex教程

小游戏1

小游戏2

avatar
文章
阅读
粉丝