Flex布局教程详解（参考自阮一峰的Flex布局教程）

最新推荐文章于 2024-06-07 09:03:10 发布

行知致简

最新推荐文章于 2024-06-07 09:03:10 发布

阅读量1.7k

点赞数

分类专栏： [Web]前端H5 文章标签： css html 前端

原文链接：https://blog.csdn.net/qq_29689343/article/details/112556133?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-112556133-blog-115361945.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distri

版权

[Web]前端H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：

一、语法篇

1、概述

2、Flex 布局怎么用

任何一个容器都可以指定为 Flex 布局

行内元素也可以使用 Flex 布局：

Webkit 内核的浏览器，必须加上-webkit前缀：

3、基本概念

4、容器的属性

6个属性概述：

flex-direction属性：

flex-wrap属性：

flex-flow属性：

justify-content属性：

align-items属性：

align-content属性：

5、项目（子元素）的属性

6个属性概述：

order属性：

flex-grow属性：

flex-shrink属性：

lex-basis属性：

flex属性：

align-self属性：

二、实例篇

前言：
本文大部分参考自阮一峰的Flex布局教程，部分进行了“易于理解”的描述；

原文地址：

Flex 布局教程：语法篇 - 阮一峰的网络日志

Flex 布局教程：实例篇 - 阮一峰的网络日志

一、语法篇
1、概述
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。

以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。

简化：Flex是简单的布局管理器；

2、Flex 布局怎么用
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒子模型提供最大的灵活性；

任何一个容器都可以指定为 Flex 布局
.box{
display: flex;
}
行内元素也可以使用 Flex 布局：
.box{
display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀：
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效；

3、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"；

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end；

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size；

简化：X轴为主轴，Y轴为交叉轴；

4、容器的属性
6个属性概述：
flex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上；
flex-wrap：子元素的换行方式：不换行；换行，第一行在上面；换行，第二行在上面；
flex-flow：是子元素的排列方式和换行方式的简写；
justify-content：设置子元素的水平对齐方式；
align-items：设置子元素的垂直对齐方式；
align-content：设置多个元素组成的整块的对齐方式；
flex-direction属性：
flex-direction属性决定主轴的方向（即项目的排列方向）；

简化：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上；

.box {
flex-direction: row | row-reverse | column | column-reverse;
}
图示：

它可能有4个值：

row（默认值）：主轴为水平方向，起点在左端；
row-reverse：主轴为水平方向，起点在右端；
column：主轴为垂直方向，起点在上沿；
column-reverse：主轴为垂直方向，起点在下沿；
代码演示：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>阮一峰的Flex布局教程</title>
   </head>
   <body>
       <div class="div">
           <div class="divC" style="width: 100px;height: 100px;background-color: aqua;"></div>
           <div class="divC" style="width: 100px;height: 100px;background-color: black;"></div>
           <div class="divC" style="width: 100px;height: 100px;background-color: blue;"></div>
       </div>
       <style type="text/css">
           .div{
               /* 设置为flex布局 */
               display: flex;
               /* 默认:从左往右 */
               flex-direction: row;
               /* row（默认值）：主轴为水平方向，起点在左端。
               row-reverse：主轴为水平方向，起点在右端。
               column：主轴为垂直方向，起点在上沿。
               column-reverse：主轴为垂直方向，起点在下沿。 */
           }
       </style>
   </body>
</html>

行知致简

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Flex布局教程详解（参考自阮一峰的Flex布局教程）

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"；注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效；Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒子模型提供最大的灵活性；
复制链接

扫一扫