一、简介

Flexible 单词意思是灵活的意思，flex布局又称为弹性布局或弹性盒子布局

Flex布局（Flexible Box Layout）是CSS3引入的一种布局模型，它旨在提供一种灵活且高效的方式来对齐、排列和分布容器中的元素。Flex布局的主要思想是将容器分为主轴和交叉轴（侧轴）。主轴是元素排列的方向，可以是水平方向（从左到右）或垂直方向（从上到下），而交叉轴则与主轴垂直。

二、概念相关

  • flex布局display:flex给父盒子设置的，父盒子被称为弹性容器（flex container）
  • 子元素被称为弹性元素弹性项目（flex items）
  • flex布局分为主轴和侧轴，默认X轴为主轴，Y轴为交叉轴（侧轴）
  • flex布局，不管子元素是块级元素还是行内元素都是可以设置宽、高的，一视同仁，如下面的示例代码，span为行内元素
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            display: flex;

            width: 600px;

            height: 500px;

            margin: 0 auto;

            background-color: pink;

        }

        span{

            width: 150px;

            height: 100px;

            background-color: coral;

        }

    </style>

</head>

<body>

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </div>

</body>

</html>

三、flex-direction 设置flex容器主轴方向

截图示例代码参考上面进行修改，就不每次贴代码了

  • 通过设置容器的display属性为flex，将其定义为一个Flex容器
  • 默认的主轴是X轴，侧轴是Y轴

    • flex-direction: row; （默认值）

    • flex-direction: column;(切换主轴为Y轴)

    • flex-direction: row-reverser；(理解)

    • flex-direction: column-reverser；(理解)

四、justify-content 设置主轴子元素排列

justify-content属性是用于控制弹性容器（flex container）中弹性项目（flex items）在主轴上的对齐方式

  • justify-content 默认的属性值是flex-start,表示项目在主轴上靠近弹性容器的起始;位置对齐
  • justify-content: flex-end; 表示项目在主轴上靠近弹性容器的结束位置对齐

  • justify-content: center;表示在主轴上居中对齐

  • justify-content: space-around;(项目在主轴上均匀分布，但是项目与容器边缘的间距是项目之间间距的一半，这意味着项目之间的间距会比项目与容器边缘的间距更大一些)

  • justify-content: space-evenly;(evenly这个单词就是平均的、均等的意思，表示项目在主轴上均匀分布，项目与容器边缘的间距与项目之间的间距都是一致的)

  • justify-content: space-between;(项目在主轴上均匀分布，并且项目之间的间距是相等的，但是第一个项目与容器的起始位置对齐，最后一个项目与容器的结束位置对齐。)

五、flex-wrap 设置子元素是否换行显示

wrap 单词含义：包，裹，包装；用（手臂、指头或腿）围紧，用……绕住；绕……走；完成拍摄，杀青 ；<非正式>使（车辆）撞上（固定物体）；（使文字）换行

  • 弹性项目默认在容器里是在一行或一列排列显示的，是不换行或列的，当一行或一列装不下子元素时，会自动缩小项目的宽度

比如父盒子（容器）的宽度是600px ，每个子元素（项目）的宽度是150px，那么当父元素下放6个子元素，肯定是超过600px的（150*6=900）

  • 如果要换行显示，flex-wrap: wrap;

六、align-items 设置侧轴子元素排列（单行）

截图所示的内容，flex主轴设置的是X轴

  • align-items:flex-start;默认值

  • align-items:flex-end;(先按主轴排列，然后再根据侧轴Y轴移动到容器的末尾)

  • align-items:center;(先按主轴排列，然后再根据侧轴Y轴移动到容器的中间)

  • align-items:stretch;(拉伸，要求子元素不能设置高度，拉伸的高度和父元素保持一致)

七、align-content 设置侧轴子元素排列（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            display: flex;

            margin: 0 auto;

            width: 600px;

            height: 500px;

            background-color: pink;

            /*设置如果装不下子元素就换行*/

            flex-wrap: wrap;

            align-content:flex-start;

        }

        span {

            width: 150px;

            height: 100px;

            background-color: coral;

        }

    </style>

</head>

<body>

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

        <span>4</span>

        <span>5</span>

        <span>6</span>

    </div>

</body>

</html>
  • align-content: flex-start;

  • align-content: flex-end;

  • align-content: center;

  • align-content: space-around;

  • align-content: space-between;

  • align-content: space-evenly;

  • align-content: stretch;

八、align-items 和 align-content对比与应用

九、flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合写法

/*flex-flow属性是flex-direction和flex-wrap属性的复合写法*/

flex-flow: row wrap;

/*flex-direction: row;*/

/*flex-wrap: wrap;*/

十、flex布局子项常见属性（flex）

  • flex 属性定义子项目分配剩余空间，用flex来表示占多少份数
  • 先看看未设置flex份数
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            display: flex;

            margin: 0 auto;

            width: 600px;

            height: 500px;

            background-color: pink;

        }

        div span:nth-child(1) {

            width: 150px;

            height: 100px;

            background-color: red;

        }

        div span:nth-child(2) {

            width: 150px;

            height: 100px;

            background-color: coral;

            /*独享剩余空间，因为第一个span和第三个span都设置了固定的宽度，剩下的空间*/

            /*flex:1;*/

        }

        div span:nth-child(3) {

            width: 150px;

            height: 100px;

            background-color: skyblue;

        }

    </style>

</head>

<body>

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </div>

</body>

</html>

  • 设置第二span 里的flex属性值为1

十一、flex布局子项常见属性（align-self）

  • 先上代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            display: flex;

            width: 600px;

            height: 500px;

            background-color: pink;

        }

        div span:nth-child(1) {

            width: 150px;

            height: 100px;

            background-color: coral;

            /*这个属性也是给子元素添加使用的*/

            /*align-self:end;*/

        }

        div span:nth-child(2) {

            width: 150px;

            height: 100px;

            background-color: skyblue;

        }

        div span:nth-child(3) {

            width: 150px;

            height: 100px;

            background-color: yellowgreen;

        }

    </style>

</head>

<body>

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </div>

</body>

</html>





        div span:nth-child(1) {

            width: 150px;

            height: 100px;

            background-color: coral;

            /*这个属性也是给子元素添加使用的*/

            align-self:end;

        }

十二、flex布局子项常见属性（order）

设置子元素的排列顺序，order默认值为0，值越小越靠前，越大越靠后，可以理解为值越小优先级越高，排的顺序就靠前，越大就越靠后

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            display: flex;

            width: 600px;

            height: 500px;

            background-color: pink;

        }

        div span:nth-child(1) {

            width: 150px;

            height: 100px;

            background-color: coral;

            /*这个属性也是给子元素添加使用的*/

            align-self: end;

            /*设置子元素的排列顺序，order默认值为0，值越小越靠前，越大越靠后，可以理解为值越小优先级越高，排的顺序就靠前，越大就越靠后*/

            order: -1;

        }

        div span:nth-child(2) {

            width: 150px;

            height: 100px;

            background-color: skyblue;

            order: -2;

        }

        div span:nth-child(3) {

            width: 150px;

            height: 100px;

            background-color: yellowgreen;

        }

    </style>

</head>

<body>

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </div>

</body>

</html>

flex布局入门的更多相关文章

  1. CSS布局-flex布局入门教程

    前言 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. 查询兼容 F ...

  2. flex布局入门总结——语法篇

    前几天看了阮一峰的Flex布局教程,讲的很不错,总结一下,有兴趣的可以去看原文http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一  F ...

  3. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

  4. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  5. 小白入门篇:flex布局

    --前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...

  6. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  7. flex布局应用于踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  8. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  9. 30分钟彻底弄懂flex布局

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...

  10. flex布局应用与踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

随机推荐

  1. RHEL 7配置HAProxy实现Web负载均衡

    本文将简单介绍使用HAProxy实现web负载均衡,主要内容包括基于权重的轮询.为HAProxy配置https.配置http重定向为https.配置HAProxy使用独立日志. 一.测试环境 HAPr ...

  2. c语言中的链接属性和存储类型

    链接属性 external属性: 不在代码块中的函数和变量在缺省情况下都属于external链接属性. 具有external属性的变量或者函数在其他源文件中无论被包含多少次,都指向同一个实体. #a. ...

  3. LeetCode刷题之652寻找重复的子树

    继续每日分享一道算法题,监督自己学习,不落下算法,有需要一起打卡的uu,可以一起加油呀! 好了,现在开始看题了哈: 给定一棵二叉树 root,返回所有重复的子树. 对于同一类的重复子树,你只需要返回其 ...

  4. Hardhat 开发框架 - Solidity开发教程连载

    Decert.me 要连载教程了, <Solidity 开发教程> 力求系统.深入的介绍 Solidity 开发, 同时这是一套交互式教程,你可以实时的修改教程里的合约代码并运行. 本教程 ...

  5. SVN添加新的用户

    1.首先确定svn的文件夹的位置 find / -name svn 2.通过find找到svn地址之后,cd进入 /var/svn/ 下 cd /var/svn/ 3.修改/var/svn/下面的au ...

  6. 文心一言 VS chatgpt （11）-- 算法导论2.3 7题 3.1 4~5题

    四.2 ^ (n+1)=O(2 ^ n)成立吗? 2^(2n)=O(2 ^ n)成立吗? 文心一言: chatgpt: 第一个式子不成立,第二个式子成立. 2 ^ (n+1) = O(2 ^ n) 该 ...

  7. 2022-12-17：订单最多的客户。以下数据，结果输出3。请问sql语句如何写？ DROP TABLE IF EXISTS `orders`； CREATE TABLE `orders` ( `

    2022-12-17:订单最多的客户.以下数据,结果输出3.请问sql语句如何写? DROP TABLE IF EXISTS `orders`; CREATE TABLE `orders` ( `or ...

  8. 2022-05-06：给你一个整数数组 arr，请你将该数组分隔为长度最多为 k 的一些（连续）子数组。分隔完成后，每个子数组的中的所有值都会变为该子数组中的最大值。 返回将数组分隔变换后能够得到的元

    2022-05-06:给你一个整数数组 arr,请你将该数组分隔为长度最多为 k 的一些(连续)子数组.分隔完成后,每个子数组的中的所有值都会变为该子数组中的最大值. 返回将数组分隔变换后能够得到的元 ...

  9. 2022-01-04：一个无序数组长度为n，所有数字都不一样，并且值都在[0...n-1]范围上。 返回让这个无序数组变成有序数组的最小交换次数。 来自小红书。

    2022-01-04:一个无序数组长度为n,所有数字都不一样,并且值都在[0-n-1]范围上. 返回让这个无序数组变成有序数组的最小交换次数. 来自小红书. 答案2022-01-04: 下标循环怼. ...

  10. 2023-05-15：对于某些非负整数 k ，如果交换 s1 中两个字母的位置恰好 k 次， 能够使结果字符串等于 s2 ，则认为字符串 s1 和 s2 的 相似度为 k。 给你两个字母异位词 s1

    2023-05-15:对于某些非负整数 k ,如果交换 s1 中两个字母的位置恰好 k 次, 能够使结果字符串等于 s2 ,则认为字符串 s1 和 s2 的 相似度为 k. 给你两个字母异位词 s1 ...