目的：能够使用Flex布局模型灵活、快速的开发网页

Flex布局/弹性布局：

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

作用：

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

Flex布局非常适合结构化布局（比如移动端界面）

设置方式

父级元素添加 display: flex；，子元素可以自动的挤压或拉伸

组成部分

弹性容器（一般父级元素）

弹性盒子（子级盒子）

主轴

侧轴（交叉轴）

子级盒子对齐方式

通过轴对齐方式修改，更变子盒排齐方式。

主轴对齐

修改主轴对齐方式的属性：justify-content（添加到弹性容器-父级）

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧（2:1）
space-evenly	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间（1:1）
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

主轴的对齐方式：

默认效果,从起点开始依次排列（一般左往右）的依次排列

  justify-content: flex-start;

！：粉红色为父级盒子背景色。

终点开始依次排列（一般右往左）

justify-content: flex-end;

主轴让内容居中，重要

justify-content: center;

让未占空间均匀分布在相邻子盒（包括相邻子盒子之间）与父级之间（空白）

1.让我们的子盒子比例2:1平分父级盒子（子盒子之间空白比两边子盒子与父级盒子之间空白比2:1）

justify-content: space-around;

2.让我们的子盒子1:1平分父级盒子的宽度（子盒子之间空白比两边子盒子与父级盒子之间空白比1:1）

justify-content: space-evenly;

让未占空间均匀分布在相邻子盒之间（空白）

justify-content: space-between;

侧轴（交叉轴）

修改主轴对齐方式属性:

align-items:（添加到弹性容器-父级）

align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级）

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

侧轴的对齐方式：

默认效果侧轴拉伸（子盒子若没有设置高height）

stretch

align-items: stretch;

侧轴对齐方式父级左上角对齐

flex-start

align-items: flex-start;

侧轴底部对齐

flex-end

align-items: flex-end;

侧轴居中对齐,重要

center

align-items: center;

倾斜摆放和align-self展示

<!DOCTYPE html>
<html lang="ch-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倾斜摆放和align-self展示</title><style>.box{width: 600px;height: 400px;margin: 0 auto;background-color: pink;/* 父级盒子变弹性容器 */display: flex;}.box .son1{width: 200px;height: 100px;background-color: aqua;/* 在弹性容器侧轴左上对齐 */align-self: flex-start;}.box .son2{width: 200px;height: 100px;background-color: red;/* 在弹性容器侧轴居中 */align-self: center;}.box .son3{width: 200px;height: 100px;background-color: blue;/* 在弹性容器侧轴底部对齐  */align-self: flex-end;}</style>
</head>
<body><div class="box"><div class="son1">1</div><div class="son2">2</div><div class="son3">3</div></div>
</body>
</html>

进阶——主轴方向改变

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值	作用
row	行, 水平(默认值)
column	列, 垂直（！重点）
row-reverse	行, 从右向左
column-reverse	列, 从下向上

HTML/CSS布局—Flex布局(弹性布局)相关推荐

CSS display:flex（弹性布局）
序: 考虑到实际开发中,写样式的机会不多,但是不可能不写,脑子容量总是不够用,每次都查,这次自己就总结下,方便下次查找(举例以下常用六个属性,语法都是加在父元素身上的). 1.flex-direc ...
[css] 你有用过弹性布局吗？说说你对它的理解
[css] 你有用过弹性布局吗?说说你对它的理解按我的经验在样式规律上大致分下类吧,等宽弹性布局单元素弹性布局多元素定比弹性布局等隙布局用 flex 或 grid 能非常轻松的完成以上效果,而 cs ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
弹性布局flex 伸缩布局 flex布局什么是弹性布局 justify-content
弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...
前端布局 Flex（弹性）布局
1. flex布局优点操作方便,布局极为简单,移动端应用很广泛 pc端浏览器支持情况较差 IE11或者更低版本,不支持或仅部分支持 2. flex布局原理 flex意为"弹性布局" ...
flex布局的整理弹性布局
Flex布局 1.概念在弹性布局中,有两根轴线: 水平方向的主轴垂直方向的交叉轴 Flex布局分项目与容器. 容器指的就是弹性盒本身.项目指的是内部的子元素. 2.容器属性容器属性指的是放在容器 ...
Flutter 布局Row（水平方向布局）、Column（垂直方向布局）、Wrap（可以自动换行的布局）、Flex（弹性布局）、Stack（叠层布局）、
1.线性布局 Row 水平方向布局 Row({... //表示水平方向子组件的布局顺序(是从左往右还是从右往左),//默认为系统当前Locale环境的文本方向(如中文.英语都是从左往右,而阿拉伯语是从 ...
html中前台布局特点,HTML5弹性布局有什么优点
HTML5弹性布局是用来为盒状模型提供最大的灵活性,优点在于其容易上手,根据flex规则很容易达到某个布局效果.任何一个容器都可以指定为Flex弹性布局. 本教程操作环境:windows7系统.CSS ...
【CSS】flex的常用布局
1.垂直居中,写在父级上 div{display: flex;justify-content: center;align-items: center; } 2.flex-左右两端,垂直居中该布局在移 ...
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
目录前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用场景一 flex-direction 场景二 justify-content align-it ...

HTML/CSS布局—Flex布局(弹性布局)

Flex布局/弹性布局：

作用：

设置方式

组成部分

子级盒子对齐方式

主轴对齐

主轴的对齐方式：

侧轴（交叉轴）

侧轴的对齐方式：

倾斜摆放和align-self展示

进阶——主轴方向改变

HTML/CSS布局—Flex布局(弹性布局)相关推荐

最新文章

热门文章