【前端】 flex布局详解

Flex布局开启,在编写之前,我们要先搞清楚一个问题,就是你要让谁开启flex布局?我们要开启flex布局的最终目的一定是为了让某几个元素进行规范化布局,那如果你单独写在某个元素身上,那它的兄弟元素也不知道自己是用了flex布局,所以display:flex;一定是在父元素身上开启。

一、父元素身上开启flex

css 复制代码
//开启flex布局
display:flex;
//布局方向
flex-direction:row;

布局方向

这里的row是指水平方向,column是指垂直方向。后面加reverse的是指反方向,比如row指的是从左到右,那么row-reverse就是从右到左。

二、子元素身上样式 flex-basis,flex-grow,flex-shrink

这三个属性可以分开写,也可以合起来写

css 复制代码
flex: flex-grow flex-shrink flex-basis
//默认值是 0 1 auto

这些属性挂载在子元素上,

这里的0和1代表的是比例,每一个子元素item身上都被分配了相关的比例值,flex-grow是指当所有元素按照自身大小渲染完毕之后,父元素主轴方向上仍有空余则按照flex-grow的比例值分配给每一个子项。相反flex-shrink则是当所有元素按照自身大小渲染完毕之后,父元素主轴方向上有溢出,则子元素按照比例缩小。

用flex-grow做例子

css 复制代码
        .father{
            display: flex;
            width: 500px;
            height: 200px;
            background-color: aqua;
        }
        .child{
            flex-grow: 1;
            flex-basis: 100px;
            background-color: pink;
        }
        .child:nth-child(1){
            flex-grow: 2;
            background-color: bisque;
        }.child:nth-child(2){
            flex-grow: 1;
            background-color: yellow;
        }

计算方法就是

(100+2x) +(100+x)*2 = 500

4x = 200; => x=50;

第一个子元素就是 200

第二第三个就是 150;

三、flex容器的交叉轴对齐align-items --- 一行元素上多标签元素高度不统一怎么对齐。

四、flex容器的主轴对齐方式 justify-content。

五、flex-wrap 当容器空间不足时是否换行

六、align-content 当定义了多根轴线时,项目子啊交叉轴上的对齐方式(多行)。

七、order属性,用于定义flex容器内部子元素的显示顺序。

补充:

在这里我注意到一个width的属性值。

css 复制代码
width:max-content | min-content | fit-content

max-content 内容有多宽他就多宽,不会顾及父元素有多宽,即不会撑开父元素。

min-content 装下单个最大内容的最小宽度。

fit-content 在不超过父级盒子宽度的情况下,尽量撑开盒子满足自己的需求。

相关推荐
m0_748250743 分钟前
高性能Web网关:OpenResty 基础讲解
前端·openresty
前端没钱29 分钟前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
NoneCoder33 分钟前
CSS系列(29)-- Scroll Snap详解
前端·css
无言非影37 分钟前
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
前端·css
我曾经是个程序员1 小时前
鸿蒙学习记录
开发语言·前端·javascript
羊小猪~~1 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
摸鱼了2 小时前
🚀 从零开始搭建 Vue 3+Vite+TypeScript+Pinia+Vue Router+SCSS+StyleLint+CommitLint+...项目
前端·vue.js
程序员shen1616112 小时前
抖音短视频saas矩阵源码系统开发所需掌握的技术
java·前端·数据库·python·算法
Ling_suu2 小时前
SpringBoot3——Web开发
java·服务器·前端
Yvemil72 小时前
《开启微服务之旅:Spring Boot Web开发》(二)
前端·spring boot·微服务