flex布局的从认识到深刻认知到熟悉使用（详细图解）

最新推荐文章于 2022-04-09 12:10:53 发布
最新推荐文章于 2022-04-09 12:10:53 发布
阅读量2.1k 收藏 34
点赞数 6
分类专栏： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43342105/article/details/106395980
版权

文章目录

flex布局的初步认知

在这里插入图片描述

兼容性

flex布局的兼容性是杠杠的，几乎普及了所有浏览器的pc端和移动端，微信小程序等移动端网页基本可以用flex布局代替浮动了
在这里插入图片描述

怎么开启一个flex布局

 .box{
            /* 开启flex布局 */
            /* 
            块级的开启方式是display设置为flex
            行内元素开启布局的方式是inline-flex
             */
            display: flex;

        }

flex的布局模型

在这里插入图片描述

两个坐标系main axis和cross axis的一些重要念

main axis被称为主轴，cross axis被称之为交叉轴，主轴的开始位置为main start 结束为止被称为main start，交叉轴的的开始位置被称为cross start ，结束为止被称为cross end，主轴的宽度为main size，同理cross size就是交叉轴的长度

注意的是上面这幅图来自官方是默认情况下的模型，有可能主轴是纵向的

flex的container中的属性

在这里插入图片描述

flex-direction

在这里插入图片描述

看如下代码

 <style>
        .box{
            /* 开启flex布局 */
            /* 
            块级的开启方式是display设置为flex
            行内元素开启布局的方式是inline-flex
             */
            display: flex;
            width: 500px;
            height: 400px;
            background-color: red;

        }

        .item{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

        .item1{
            background-color: rebeccapurple;
        }

        .item2{
            background-color: #0f0;
    
        }
        .item3{
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <!-- <div></div> -->

       
    </div> 
    <strong>加粗样式</strong>
</body>

默认情况主轴方向从左到右
在这里插入图片描述

当设置


            /* flex-direction默认情况从左到右 */
            flex: row;(默认值)


            /* 和主轴方向从右到左的排列 */
            flex-direction: row-reverse;


            /* 主轴方向从上到下 */

            flex-direction:column;


            /* 主轴方向下到上 */

            flex-direction:column-reverse;

在这里插入图片描述

Justigy-content

*决定了flex items在main axis上的对齐放
在这里插入图片描述

  /* 默认值 与main start对齐*/
  justify-content: flex-start;

在这里插入图片描述

    /* flex-end与main end对齐 */
     justify-content: flex-end;

在这里插入图片描述

 /* 居中对齐 */

            justify-content:center;

在这里插入图片描述


            /* 间隔居中对齐 */

            /* justify-content: space-between; */

在这里插入图片描述

/* 均匀居中， */

            /* justify-content: space-evenly; */

在这里插入图片描述


            /* 两边的间隔小，中间间隔大 */

            /* justify-content: space-around; */

在这里插入图片描述

align-items

决定了flex items在cross axis上的对齐方式

在这里插入图片描述

如果flex-item没有设置高度，那么flex-item的高度不像以前那样他的高度由内容决定，而是他的高度会拉伸和父元素一样如下

在这里插入图片描述

align-items: normal;

在这里插入图片描述
前提是没有设置item高度

在这里插入图片描述

当给元素设置不同的高度时 用normal或者flex-start如下cross start对齐


       .item1 {
           background-color: rebeccapurple;
           height: 60px;

       }

       .item2 {
           background-color: #0f0;
           height: 150px;

       }

       .item3 {
           background-color: #fff;
           height: 130px;
       }


   align-items: flex-start;

在这里插入图片描述

   align-items: flex-end;

按cross-end对齐

在这里插入图片描述

align-items: center;

按照交叉轴的中心点对齐
在这里插入图片描述

  align-items:baseline;

按照基线对齐（内容第一行文本的基线）
在这里插入图片描述

flex-wrap

如果把item变为9个
那么样式如下不换行显示，且元素是设置过宽度的的

在这里插入图片描述
在这里插入图片描述
换行显示

   flex-wrap: wrap;

在这里插入图片描述

反转换行交叉轴

   flex-wrap: wrap-reverse;

在这里插入图片描述

flex-flow

在这里插入图片描述

 flex-flow: row-reverse;

在这里插入图片描述

     flex-flow: row-reverse wrap;

在这里插入图片描述

align-content

align-content决定了多行flex item是在cross axis上的对齐方式，用法与justify-content类似

在这里插入图片描述.
这里参考justify-content 看看吧，只不过把主轴换成了交叉轴

flex-item中的属性

order

在这里插入图片描述

      .box {
            /* 开启flex布局 */
            /* 
            块级的开启方式是display设置为flex
            行内元素开启布局的方式是inline-flex
             */
            display: flex;
            width: 550px;
            height: 400px;
            background-color: red;

        }

        .item {
            width: 100px;
            height: 100px;
            text-align: center;
            /* line-height: 100px; */
        }

        .item1 {
            background-color: rebeccapurple;
            order:10

        }

        .item2 {
            background-color: #0f0;
            order: 6;
       
        }

        .item3 {
            background-color: #fff;
            order: 100;
           
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
    </div>
    <strong>加粗样式</strong>
</body>

align-self

在这里插入图片描述

.item3 {
            background-color: #fff;
            /* order: 100; */
            align-self: flex-end;
           
        }

这里的item3设置了align-self属性它将会覆盖父元素的align-item属性

在这里插入图片描述

flex-grow

在这里插入图片描述


        .item {
            width: 100px;
            height: 100px;
            text-align: center;
            /* line-height: 100px; */
        }

        .item1 {
            background-color: rebeccapurple;
            /* order:10 */
            flex-grow: 1;

        }

        .item2 {
            background-color: #0f0;
            /* order: 6; */
            flex-grow: 1;
       
        }

        .item3 {
            background-color: #fff;
            /* order: 100; */
            /* align-self: flex-end; */
            flex-grow: 1;
           
        }

把三个item的flex-grow 都设置为1会铺满主轴
在这里插入图片描述

flex-shrink

在这里插入图片描述


        .item1 {
            background-color: rebeccapurple;
            /* order:10 */
            /* flex-grow: 1; */
            flex-shrink: 2;


        }

        .item2 {
            background-color: #0f0;
            /* order: 6; */
            /* flex-grow: 1; */
            flex-shrink: 2;
        }

        .item3 {
            background-color: #fff;
            /* order: 100; */
            /* align-self: flex-end; */
            /* flex-grow: 1; */
            flex-shrink: 2;
        }

就是3个盒子将多出的部分按照1:2：2缩小

在这里插入图片描述

felx-basis

在这里插入图片描述

就是设置item在主轴方向的宽度，如果同时设置宽度有设置这个以这个为准

flex

在这里插入图片描述

_阿锋丶
关注
  • 6
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
看完这篇，对flex布局还不熟悉，那就来找我（flex布局最全详解）
zhangjing1019的博客
05-24 950
前言 传统的页面布局，基于盒子模型margin + border + padding + content，依赖 display + position + float。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 Flex 布局，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局。目前，Flex 布局，可以简便、完整、响应式地实现各种页面布局。它已经得到了所有浏览器的支持。 什么是flex布局？ Flex 是 Flexible Bo...
Flex布局，常用的几个属性值；
晴天Smile
05-12 6237
任何东西都可以Flex布局； 包括行内元素： display:inline-flex; .box{ flex-wrap: nowrap | wrap | wrap-reverse; }它可能取三个值。（1）nowrap（默认）：不换行。（2）wrap：换行，第一行在上方。（3）wrap-reverse：换行，第一行在下方。 3.4 justify-content属性ju
Flex开发实战(一)--Flex的详细介绍
weixin_30919919的博客
06-24 581
背景 由于最近要维护公司的项目，项目里面用到了Flex技术，所以最近一直在恶补，这篇博文就将最近的学习内容，进行一下简单的总结。 无论是做web还是桌面应用，相信大家对于界面的要求已经越来越高，界面趋于大图标，扁平化，要求不断提高用户体验度高，把握好人机交互。相应的技术也层出不穷，例如：Flex，JQuery，Ajax，HTML5+CSS3等等吧。 什么是Flex ...
Flex入门（一）——基本理论
学会改变自己——才能突破
07-27 3498
Flash作为一款漂亮动画的产品，是大家所喜爱的，他可以给我们带来更好的视觉效果。但是如何使其很快很好的让Java程序员，.net程序员等所接受，并进行相关开发，Macromedia公司在2004年3月发布的，基于其专有的MacromediaFlash平台，它是涵盖了支持RIA（Rich Internet Applications）的开发和部署的一系列技术组合。 是一种类似于Jsp和Asp的前台技
小程序开发必看！一篇文章让你了解 Flex 布局
第九程序官方博客
04-19 6595
第九程序注明： 要想开发小程序，每个人都需要先了解 Flex。小程序的开发框架使用了 Flex 排版布局，它能帮助开发者以最快的速度，构建美观而具有动态调整性质的小程序排版。
从0到1，带你尝鲜flex布局
01-08
文章目录1.flex布局体验1.1传统布局与flex布局2.flex布局原理2.1布局原理总结Flex布局原理3.flex布局父项常见属性3.1 常见父项属性3.2 flex-direction设置主轴方向3.3.justify-content 设置主轴上的子元素排列方式...
微信小程序开发--从block盒式布局到Flex弹性布局
03-29
说明：为了便于理解和分析，此处我们全部使用块级元素div来进行说明。因为要将这个文档应用于博客，所以所有的样式写在style中。公众号不支持，博客样式支持不好，又重新上传了图片，替换了展示效果（泪目）。你们能...
使用flex布局的前端静态网页.zip
最新发布
10-21
使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip
Flex布局在小程序的使用
03-29
所以为了在小程序开发中更方便地布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍，并直接使用wxss来编写例子，运行环境是小程序的开发者工具。 Flex布局的基本概念 Flex布局...
使用Flex布局实现头部固定内容区域滚动的方法
12-28
页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。 Flex布局好处：1.不破坏html文档流 2.兼容性更好。 display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。 ...
图解flex布局
syzdev的博客
03-26 1118
说明：本文在内容结构部分引用自阮一峰-Flex 布局教程，但大部分内容做了修改和补充，并且重绘了所有图例。 1 什么是flex布局？ flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任意容器都可以定义为flex布局： display: flex; 还有一种方式为display: inline-flex; 可以给行内元素添加flex布局，inline-flex和inline-block一样，对内部元素来说是个display: flex 的容器，对外部元素来说.
css flex 弹性盒子布局
weixin_43550660的博客
11-25 525
css flex 弹性盒子布局 前言 CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。 flex 布局 是加在父元素上面得，然后主轴和侧轴，相当于 x , y 轴（这句话要注意），但是有属性可以控制其转换，下面会有说明，所以 才会有 主轴 和 侧轴 得说法，并没有用 ...
flex布局——ul居右
GJM_CSDN的博客
07-19 4506
让ul里的内容居右显示 如图 显示 给每个标签设置flex为1，则其可以平均分布   设置  align-items属性让其居中显示 justify-conent让其靠右显示
flex布局全解
weixin_44667463的博客
02-20 4286
一、入门 附博客园（理解形象）：一篇文章弄懂flex布局 - 听风是风 - 博客园 (cnblogs.com) 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。 而flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由
flex布局居右
WEB___的博客
04-09 4157
代码： <el-card style="margin-top: 20px; width:100%;flex:1;text-align: right;"> <el-button type="primary" @click="doSubmit('addForm')">提交销售单</el-button> <el-button type="primary" @click="print">打印</el-button> <
响应式布局利器—我对flex布局的理解
xiaoyinmochun的博客
09-06 4874
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： flex容器 flex项目 flex容器 flex-direction` flex-wrap 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctrl + G 提升标题 Ctrl +...
对Flex布局的理解
m0_46938695的博客
09-13 318
一、开启Flex布局 .box{ display: flex; } 二、Flex布局容器(container)的属性 flex-direction：项目沿主轴的排列方向 .box{ flex-direction:row(默认) | row-reverse | column ｜ column-reverse; } flex-wrap：沿轴线项目是否换行 .box{ flex-wrap:nowrap(默认) | wrap | wrap- reserve; } flex-flow：flex- dire
flex使用手册翻译
lishichengyan的博客
03-11 5221
原文网址在这里，一些我认为不重要的部分就略了。大部分是google翻译（毕竟一句一句慢慢看好再翻还是很累的好吧TAT），绝不代表本人的水平（滑稽.jpg）。不恰当的地方欢迎指正，也欢迎补充剩下的“略”。————————————————————————（我是萌萌哒昏割线）名称flex - fast lexical analyzer generator（快速词法分析生成工具）。概要flex [-bcd...
Flex 布局——语法篇
ankang1124的博客
10-23 292
该篇主要记录flex主要语法，概念不再叙述 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值