本文详细介绍了Flex弹性布局的历史、定义、应用场景和基本概念，包括Flex容器和项目的属性，如flex-direction、flex-wrap、justify-content等。通过实例演示了如何制作京东App底部和三栏布局，帮助开发者掌握Flex布局技巧。
Flex弹性布局
1、flex发展历史
2009年W3C 提出概念，但是官方没有flex这个词。当时使用display:box;表示弹性布局
2011年浏览器厂商决定使用flexbox，来形容它的布局特点
2015年W3C正式将其修改为flexbox布局
2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定
2、flex定义
-
Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
-
作用
- 它能够更加高效方便的控制元素的对齐、排列
- 可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的
- 控制元素在页面的布局方向
- 按照不同于DOM所指定排序方式对屏幕上的元素重新排序
2、应用场景
使用在现代浏览器中，史前浏览器不支持 如 chorme4.0
有一定宽容度要求的设计中,因为弹性布局灵活性太高，很难100%还原设计稿，需要有一定的宽容度的设计稿
3、Flex基本概念
- 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
- 默认水平方向为主轴（main axis）
- 默认垂直方向为交叉轴、侧轴（cross axis）
- 项目默认沿主轴排列
4、Flex布局语法
-
语法
想让谁成为flex布局的容器，就在该元素上设置flex属性
- 块级元素 display : flex; / display:-webkit-flex
- 行内元素 display : inline-flex;
-
添加前缀，即浏览器前缀
-
设为 Flex 布局以后，flex item(项目)的float、clear和vertical-align属性将失效,定位不失效>
5、容器上的属性 - 设置flex 属性的元素
| 容器属性 | 说明 |
|---|---|
| flex-direction | 决定主轴的方向（即项目的排列方向） |
| flex-wrap | 定义如果在一条轴线排不下，如何换行 |
| flex-flow | 复合属性：是flex-direction和flex-wrap属性的简写形式 |
| justify-content | 定义项目在主轴上的对齐方式 |
| align-items | 定义项目在交叉轴、侧轴上如何对齐 |
| align-content | 定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 |
flex-direction [决定主轴的方向]：
决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
属性值含义：
row（默认）、row-reverse：主轴为水平方向，起点在左端、右端
column 、column-reverse：主轴为垂直方向，起点在上沿、下沿
特点：
可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的
即：不论项目尺寸是多少，在不设置换行的情况下，会默认把所有的项目放在一行显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<script src=""></script>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
height:
最低0.47元/天 解锁文章
2362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
