首页 > 其他分享 >13-CSS3属性：Flex布局图文详解

13-CSS3属性：Flex布局图文详解

时间：2023-04-20 13:24:20浏览次数：52  
标签：CSS3 Flex 13 flex section ul child 对齐 nth 

title: 13-CSS3属性：Flex布局图文详解
publish: true

前言

CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。

flex 初体验

我们先来看看下面这个最简单的布局：

上面这张图中的布局是我们都熟悉的：默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列。

在此基础之上，如果我给父容器仅仅加一个 display: flex属性，此时，这些子元素的布局会摇身一变：

没错，子元素们会在水平方向上，从左至右排列，就是这么神奇。到此为止，你已经掌握了关于 flex 的一半的知识。

flex 布局的优势

1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。

但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。

2、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。

flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。

flex 的兼容性问题

上图中可以看到， flex 布局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。

但是，比如网易新闻、淘宝这样的大型网站，面对的是海量用户，即便使用低版本浏览器的用户比例很少，但绝对基数仍然是很庞大的。因此，这些网站为了兼容低版本的 IE 浏览器，暂时还不敢尝试使用 flex 布局。

概念：弹性盒子、子元素

在讲 flex 的知识点之前，我们事先约定两个概念：

  • 弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器。

  • 子元素/弹性元素：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。

概念：主轴和侧轴

在上面的“初体验”例子中，我们发现，弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。

在此，我们引入主轴和侧轴的概念。

如上图所示：

  • 主轴：flex容器的主轴，默认是水平方向，从左向右。

  • 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。

PS：主轴和侧轴并不是固定不变的，可以通过 flex-direction 更换方向，我们在后面会讲到。

弹性盒子

声明定义

使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。

备注：一般是用 display:flex这个属性。display:inline-flex用得较少。

flex-direction 属性

flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：

属性值 描述
row 从左到右水平排列子元素（默认值）
column 从上到下垂直排列子元素
row-reverse 从右向左排列子元素
column-reverse 从下到上垂直排列子元素

备注：如果我们不给父容器写flex-direction这个属性，那么，子元素默认就是从左到右排列的。

代码演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
       body{
           background-color: #eee;
           font-family: "Microsoft Yahei";
           font-size:22px;
       }

        h3{
            font-weight: normal;
        }
        section{
            width: 1000px;

            margin:40px auto;
        }

        ul{
            background-color: #fff;
            border: 1px solid #ccc;

        }

        ul li{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin:10px;
        }
        section:nth-child(1) ul{
            overflow: hidden; /* 清除浮动 */
        }
        section:nth-child(1) ul li{
            float: left;
        }
        /* 设置伸缩盒子*/
        section:nth-child(2) ul{
            display: flex;
        }

        section:nth-child(3) ul{
            /* 设置伸缩布局*/
            display: flex;
            /* 设置主轴方向*/
            flex-direction: row;
        }

        section:nth-child(4) ul{
            /* 设置伸缩布局*/
            display: flex;
            /* 设置主轴方向 :水平翻转*/
            flex-direction: row-reverse;
        }

        section:nth-child(5) ul{
            /* 设置伸缩布局*/
            display: flex;
            /* 设置主轴方向 :垂直*/
            flex-direction: column;
        }

        section:nth-child(6) ul{
            /* 设置伸缩布局*/
            display: flex;
            /* 设置主轴方向 :垂直*/
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <section>
        <h3>传统布局</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>伸缩布局 display:flex</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴方向 flex-direction:row</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴方向 flex-direction:row-reverse</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴方向 flex-direction:column</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴方向 flex-direction:column-reverse</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
</body>
</html>

flex-wrap 属性

flex-wrap：控制子元素溢出时的换行处理。

justify-content 属性

justify-content：控制子元素在主轴上的排列方式。

弹性元素

justify-content 属性

  • justify-content: flex-start; 设置子元素在主轴上的对齐方式。属性值可以是：
    • flex-start 从主轴的起点对齐（默认值）
    • flex-end 从主轴的终点对齐
    • center 居中对齐
    • space-around 在父盒子里平分
    • space-between 两端对齐 平分

代码演示：（在浏览器中打开看效果）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style:none;}
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";

        }
        section{
            width: 1000px;
            margin:50px auto;
        }
        section h3{
            font-size:22px;
            font-weight: normal;
        }

        ul{
            border: 1px solid #999;
            background-color: #fff;
            display: flex;

        }

        ul li{
            width: 200px;
            height: 200px;
            background: pink;
            margin:10px;

        }

        section:nth-child(1) ul{
            /* 主轴对齐方式：从主轴开始的方向对齐*/
            justify-content: flex-start;
        }

        section:nth-child(2) ul{
            /* 主轴对齐方式：从主轴结束的方向对齐*/
            justify-content: flex-end;
        }

        section:nth-child(3) ul{
            /* 主轴对齐方式：居中对齐*/
            justify-content: center;
        }

        section:nth-child(4) ul{
            /* 主轴对齐方式：在父盒子中平分*/
            justify-content: space-around;

           }

        section:nth-child(5) ul{
            /* 主轴对齐方式：两端对齐 平分*/
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <section>
        <h3>主轴的对齐方式：justify-content:flex-start</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴的对齐方式：justify-content:flex-end</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴的对齐方式：justify-content:center</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴的对齐方式：justify-content:space-round</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>

    <section>
        <h3>主轴的对齐方式：justify-content:space-bettwen</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </section>
</body>
</html>

align-items 属性

align-items：设置子元素在侧轴上的对齐方式。属性值可以是：
- flex-start 从侧轴开始的方向对齐
- flex-end 从侧轴结束的方向对齐
- baseline 基线 默认同flex-start
- center 中间对齐
- stretch 拉伸

代码演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style:none;
        }
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";

        }
        section{
            width: 1000px;
            margin:50px auto;
        }
        section h3{
            font-size:22px;
            font-weight: normal;
        }

        ul{
            border: 1px solid #999;
            background-color: #fff;
            display: flex;
            height:500px;

        }

        ul li{
            width: 200px;
            height: 200px;
            background: pink;
            margin:10px;

        }

        section:nth-child(1) ul{
            /* 侧轴对齐方式 ：从侧轴开始的方向对齐*/
            align-items:flex-start;
        }

        section:nth-child(2) ul{
            /* 侧轴对齐方式 ：从侧轴结束的方向对齐*/
            align-items:flex-end;
        }

        section:nth-child(3) ul{
            /* 侧轴对齐方式 ：居中*/
            align-items:center;
        }

        section:nth-child(4) ul{
            /* 侧轴对齐方式 ：基线 默认同flex-start*/
            align-items:baseline;
        }

        section:nth-child(5) ul{
            /* 侧轴对齐方式 ：拉伸*/
            align-items:stretch;

        }

        section:nth-child(5) ul li{
            height:auto;
        }


    </style>
</head>
<body>
<section>
    <h3>侧轴的对齐方式:align-items ：flex-start</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>侧轴的对齐方式：align-items:flex-end</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>侧轴的对齐方式：align-items:center</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>侧轴的对齐方式：align-itmes:baseline</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>侧轴的对齐方式：align-itmes: stretch</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>
</body>
</html>

flex属性：设置子盒子的权重

代码演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style:none;
        }
        body{
            background-color: #eee;
            font-family: "Microsoft Yahei";

        }
        section{
            width: 1000px;
            margin:50px auto;
        }
        section h3{
            font-size:22px;
            font-weight: normal;
        }

        ul{
            border: 1px solid #999;
            background-color: #fff;
            display: flex;

        }

        ul li{
            width: 200px;
            height: 200px;
            background: pink;
            margin:10px;

        }

        section:nth-child(1) ul li:nth-child(1){
            flex:1;
        }

        section:nth-child(1) ul li:nth-child(2){
            flex:1;
        }

        section:nth-child(1) ul li:nth-child(3){
            flex:8;
        }

        section:nth-child(2) ul li:nth-child(1){

        }

        section:nth-child(2) ul li:nth-child(2){
            flex:1;
        }

        section:nth-child(2) ul li:nth-child(3){
           flex:4;
        }


    </style>
</head>
<body>
<section>
    <h3>伸缩比例:flex</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>

<section>
    <h3>伸缩比例:flex</h3>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</section>


</body>
</html>

相关链接

CSS Flexbox 可视化手册

可视化的截图如下：（请点开链接，查看大图）

http://img.smyhvae.com/20190821_2101.png

相关文章：

flex 相关的推荐文章

flex 相关的教程

技巧：使用 margin 自动撑满剩余空间

标签：CSS3,Flex,13,flex,section,ul,child,对齐,nth
From： https://www.cnblogs.com/full-stack-linux-new/p/17336440.html

相关文章

  • 14-CSS3属性详解：Web字体
    title:14-CSS3属性详解：Web字体publish:true前言开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。支持程度比较好，甚至IE低版本的浏览器也能支持。字体的常见格......
  • 17-CSS3的常见边框汇总
    title:17-CSS3的常见边框汇总publish:trueCSS3常见边框汇总<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS3边框</title><style>body,ul,li,dl,dt,dd,h1,......
  • 【DP】LeetCode 132. 分割回文串 II
    题目链接132.分割回文串II思路分析动态规划题目的时候只需要考虑最后一个阶段，因为所有的阶段转化都是相同的，考虑最后一个阶段容易发现规律在数组的动态规划问题中，一般dp[i]都是表示以nums[i]为结尾的状态；dp[i][j]分别表示以nums1[i]和nums2[j]为结尾的状态，以此类......
  • 20201302姬正坤《网络对抗技术》Exp5 信息搜集与漏洞扫描
    《网络对抗技术》Exp5信息搜集与漏洞扫描实践目标（1）各种搜索技巧的应用（2）DNSIP注册信息的查询（3）基本的扫描技术：主机发现、端口扫描、OS及服务版本探测、具体服务的查点（以自己主机为目标）（4）漏洞扫描：会扫，会看报告，会查漏洞说明，会修补漏洞（以自己主机为目标）实践步骤一、各种搜索技......
  • ASRock Z690 Extreme WiFi 6E i7 13700KF电脑 Hackintosh 黑苹果efi引导文件
    原文来源于黑果魏叔官网，转载需注明出处。（下载请直接百度黑果魏叔）硬件型号驱动情况主板ASRockZ690ExtremeWiFi6E处理器IntelCorei713700KF已驱动内存KINGBANK2x32GBDDR4-3600CL18已驱动硬盘PredatorSSDGM70001TB已驱动显卡YESTONRX6800XT16G已驱动声卡ConexantCX8070......
  • 接口请求413 Request Entity Too large问题处理
     刚看到这个问题时，发现是请求接口时传递的参数过大，于是就在度娘上搜索了关于这个问题的处理方法；参考了好几篇文章，基本都说是配置问题最终，参考了知乎上的这篇文章：https://zhuanlan.zhihu.com/p/76679642关于上篇文章中的前端配置参数：bodyParser在express4版本中已经被弃用......
  • Investigating Div-Sum Property UVA - 11361
     定问在[A,B]中，有多少个整数本身能被m整除，各个数位上数字之和也能被m整除？  #include<iostream>#include<cstring>#include<vector>usingnamespacestd;vector<int>a;intm,f[40][105][105][2];intdfs(intx,intv1,intv2,intflg){ if(x<0) retur......
  • 题解 P9130 【[USACO23FEB] Hungry Cow P】
    赛时开始一眼线段树分治，交了几发都T了，就意识到事情不对。后来想了想发现势能分析不能带撤销。。。后来加了一些不能改变复杂度假了的优化，没过之后就自闭跑路了。。。赛后听别人说了个楼房重建就明白怎么做了。首先，我们离线下来把\(a\)排序，去重（这样方便一点，不然权值线段树上......
  • 20201306 Exp5 信息搜集与漏洞扫描
    目录一、实践目标及实践内容实践目标实践内容二、实践原理三、实践过程记录1、各种搜索技巧的应用搜索网址目录结构利用搜索引擎搜索特定类型的文件使用traceroute命令进行路由侦查2、DNSIP注册信息的查询whois查询nslookup查询dig查询LP2Location地理位置查询IP......
  • 网络对抗实验五 信息搜集与漏洞扫描--20201313
    目录网络对抗实验五信息搜集与漏洞扫描一、实践目标及实践内容1.实践目标2.实践内容二、实践原理1.信息搜集三、实践过程记录1、各种搜索技巧的应用搜索网址目录结构使用traceroute命令进行路由侦查2、DNSIP注册信息的查询whois查询nslookup查询dig查询LP2Location地理位置查......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99