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实现垂直居中显示
javascript 复制代码
 <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>
  1. 多元素居中显示(很常用)
javascript 复制代码
  <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. 两端对齐,项目之间的间隔都相等(很常用)

javascript 复制代码
 <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.自动换行

javascript 复制代码
 <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.在同一行元素竖直方向居中显示

javascript 复制代码
<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

来源:稀土掘金

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip