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操作的是主轴方向上的项目而不一定是水平！！！
在这里插入图片描述

二例子

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>

在这里插入图片描述

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

  <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>