flex布局

2020-06-19  本文已影响0人  莎氏笔丫

flex布局中存在两个重要的概念,一个是轴,一个是容器

image.png

如上图所示,轴又分为主轴和交叉轴两个部分。

  1. 主轴
    justify-content属性决定了子容器沿着主轴的排列方向,而主轴的方向又是有flex-direction属性决定的。
    主轴的开始端由flex-start表示,结束端由flex-end表示。
  2. 交叉轴
    【交叉轴方向为从左到右或者从上到下】,起始端由flex-start表示,结束端由flex-end表示
    因此当flex-direction定下的时候,主轴与交叉轴的方向就已经确定下来了。
    flex-direction总共有4个值
  3. row,默认值,从左向右
  4. column,从上向下
  5. row-reverse,从右向左
  6. column-reverse,从下向上

容器

容器存在这样的特点,父容器可以设置子容器的排列方式,子容器也可以设置自己的排列方式,如果子容器设置了则以子容器为准。
  1. 父容器
  1. 子容器
    在主轴上如何伸缩【flex】
    在交叉轴上如何排列【align-self】,与align-items一致,只不过是在子容器上设置

flex进阶

  1. 父容器
  1. 子容器
上一篇下一篇

猜你喜欢

热点阅读