flex的5种常见使用

Flex 布局教程：语法篇

其实我每次记一个样式标签,都是根据英文来记,但是justify-content和align-items确实让我迷惑,这次我打算只记 justify-content属性定义了项目在主轴上的对齐方式,好好总结一下用法~

一.基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

在默认的情况下,主轴的方向是主轴为水平方向，起点在左端,也就是下面这样的一个方向,而他的flex-direction属性可以去改变主轴的方向,justify-content属性定义了项目在主轴上的对齐方式,
align-items属性定义项目在交叉轴上如何对齐,这里要注意的就是假设flex-direction改变了主轴的方向,justify-content操作的是主轴方向上的项目而不一定是水平！！！

二 例子

1. flex实现垂直居中显示

 <div class="father">
    <div class="son1">你好</div>
  </div>
  <style>
    /* justify-content定义了主轴方向的对其方式,在没有定义flex-direction的时候,
    默认的主轴就是水平,起点就是最左边 */
    .father {
      width: 200px;
      height: 200px;
      display: flex;
      background-color: burlywood;
      justify-content: center;
      align-items: center;
    }
  </style>

2. 多元素居中显示(很常用)

  <div class="father">
    <div class="son1">你好</div>
    <div class="son2">哈哈哈哈哈哈</div>
    <div class="son3">可爱的很</div>
  </div>
  <style>
    .father {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

flex-direction: column;已经改变了主轴的方向为

那么在垂直方向的操作为justify-content,项目水平方向的操作属性应该是align-items,想要单个项目水平居中显示应该是align-items: center;

3. 两端对齐，项目之间的间隔都相等(很常用)

 <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
  </div>
  <style>
    .son1, .son2, .son3 {
      width: 100px;
      height: 200px;
      background-color: coral;
    }
    .father {
      display: flex;
      /* 假设测量出左右padding为20px */
      padding: 0px 20px;
      justify-content: space-between;
    }
  </style>

对于间隔一样,我们可以采用量出左右padding,然后中间通过主轴上space-between来统一间距

4.自动换行

 <div class="father">
    <div class="son1"></div>
    <div class="son1"></div>
    <div class="son1"></div>
    <div class="son1"></div>
  </div>
  <style>
    .son1 {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-top: 10px;
      background-color: coral;
    }
    .father {
      display: flex;
      width: 380px;
      flex-wrap: wrap;
    }
  </style>

默认为不换行,设置wrap可换行

5.在同一行元素竖直方向居中显示

<div class="father">
    <div class="son1">你好</div>
    <div class="son2">哈哈哈哈哈哈</div>
    <div class="son3">可爱的很</div>
  </div>
  <style>
    .father {
      display: flex;
      width: 300px;
      height: 100px;
      background-color: red;
      align-items: center;
    }
  </style>

可通过单个元素margin来明确间距,或者flex：n等

只有不断的重复理解记忆,才能一挥手就能写出来-_-

还有什么场景你们常用的吗?欢迎留言

链接：https://juejin.cn/post/7010701578638196750
来源：稀土掘金