flex布局_Flex布局,真香
1.基本原理
Flex
英文意思为,弯曲,屈伸,可以伸缩的布局,天生就是为了适配不同的分辨率。而且用法也很简单,首先只要告诉浏览器,我是一个伸缩布局就可以了。
.faBox { display: 'flex'; //给父元素设置为伸缩布局
.sonBox1 { ... } .sonBox2 { ... }}
设置完 Flex 之后,就会有下面的这个关系图,我们一个一个看。
2.容器属性
谁被设置成了 display: flex;
,谁就是容器。上面图中,faBox
就是容器,所以容器属性要写在容器属性里面。
2.1 flex-direction 属性
从英语意思了解属性,翻译为伸缩方向,该属性可以设置主轴的方向,有六个值。
.faBox { flex-direction: row | row-reverse | column | column-reverse | initial | inherit;}
上面前四个属性分别对应以下四种情况
flex-direction
还有两个可能的取值,initial
和 inherit
根据英文意思可知。
initial
意为“最初的”,是 CSS 提供的关键字,很多地方都能使用,可以快速设置某个属性的默认值,方便快捷。inherit
意为“继承”,可以从父元素中继承该属性。
2.2 flex-wrap 属性
根据中文意思来判断,这个东西应该是控制换行的。
.faBox{ flex-wrap: nowrap | wrap | wrap-reverse;}
2.3 flex-flow 属性
该属性是 flex-wrap
和 flex-direction
的简写方式。
.faBox{ flex-flow: || ;}
2.4 justify-content 属性
该属性负责主轴的对齐方式。
.faBox{ justify-content: flex-start | flex-end | center | space-between | space-around;}
2.5 align-items 属性
该属性负责交叉轴的对齐方式(垂直居中靠它来实现,很容易,面试常考题)。
2.6 align-content 属性
设置多根主轴时候的对齐方式,如果只有一条轴线,不起作用。
.faBox{ align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
3.项目属性
3.1 order 属性
order
英文意思秩序,该属性可以设置项目的排列顺序,从小到大。
.sonBox1{ order: ;}
3.2 flex-grow 属性
定义项目的放大比例,默认 0
,不参与放大。
.sonBox1{ flex-grow: ; /* default 0 */}
3.3 flex-shrink 属性
定义项目缩放。
.sonBox1{ flex-shrink: ; /* default 1 */}
3.4 flex-basis 属性
属性定义了在分配多余空间之前,项目占据的主轴空间。
.sonBox1{ flex-shrink: ; /* default 1 */}
3.5 flex 属性(推荐)
flex-grow
,flex-shrink
和 flex-basis
的简写。
.sonBox1{ flex: none | [ ? || ]}
3.6 align-self 属性
可给子元素设置单独的对齐方式。auto
的时候是继承父元素的 align-item
.sonBox1{ align-self: auto | flex-start | flex-end | center | baseline | stretch;}
近期大白话让你更懂Docker前端如何在项目中做出亮点在看支持一下❤️
flex布局_Flex布局,真香相关推荐
- flex 平铺布局_flex布局及各种布局的总结
Flexbox display: flex; 如果也想设置内联元素为弹性盒子,可以使用display:inline-flex; 实现三种其他布局难以达到的效果: 在父内容里面垂直居中一个块内容. 使容 ...
- flex布局_flex 布局概述
flex 布局概述 1. flex 是什么 flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好 2. flex 解决了什么问题 块级元素的垂 ...
- Web前端学习笔记09:移动web开发流式布局_flex布局
文章目录 移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 1.2 手机屏幕的现状 1.3移动端调试方法 2.0 视口 2.1 布局视口 layout viewport 2.3理想视口 i ...
- flex布局_flex布局的 flex(felx-grow、flex-shrink、flex-basis)详解
flex布局中的flex-grow,flex-shrink,flex-basis 接上篇文章, 1. flex-grow属性 flex-grow定义剩余空间的分成.默认为0,即如果存在剩余空间,也不放 ...
- flex 平铺布局_Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- flex 平铺布局_Flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- Web前端学习笔记10:移动web开发流式布局_flex布局
文章目录 移动web开发之rem布局 1 rem基础 1.1 rem单位 2 媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 3 less 基础 3.1 维护css弊端 3.2 Less ...
- flex 单独一行_Flex布局从了解到使用只需5min
作者:沸羊羊_ https://blog.csdn.net/weixin_42653522/article/details/106940004 Flex简介 页面布局的传统解决方案是基于盒状模型,使用 ...
- flex 换主轴后子元素占满_Flex布局
在没有接触Flex之前一直使用float.display.position .说实话用起来非常恶心.当使用Flex时,我们可以简洁优雅实现复杂的页面布局 1.Flex 布局? 在 flex 容器中默认 ...
最新文章
- 值得推荐!安利8个小众好用的宝藏工具,解决各种需求
- C# 调Win32 API SendMessage简单用法及wMsg常量
- html5 sidetoggle,javascript-使用React.js实现SlideToggle功能
- nssl1175-小S练跑步【bfs】
- 工作201:所需功能优化
- Shiro Shiro Web Support and EnvironmentLoaderListener
- python--for循环
- 学习笔记-Matlab算法篇-动态规划
- 《物联网通信》知识提纲-第1章 概述
- 苏宁11.11:苏宁双十一大促保障经验
- WEB_BASIC---02 CSS概述、CSS语法、CSS选择器、CSS声明
- GPT-4:不了不了,这些我还做不到
- CPU怎么选择,单核cpu与多核cpu的区别
- 小程序推荐——那些好用实用的小程序(图片类、资讯类、工具类)
- NO7 显式的终结方法
- 使用Groovy和7-Zip-JBinding解压缩7-Zip文件
- maven的setting.xml文件配置
- Go语言学习1-基础入门
- 地球上空首次绽放焰火汉字“未来”
- “物联网开发实战”学习笔记-(五)根据土壤湿度、环境温湿度和光照强度自动浇花
热门文章
- 10个小技巧助您写出高性能的ASP.NET Core代码
- Docker最全教程——MongoDB容器化(十三)
- Visual Studio 2017 与 Visual Studio for Mac 支持更新
- 一文搞清到底什么是 .NET?
- EFCore2.0@Xamarin.Forms
- .NET Exceptionless 日志收集框架本地环境搭建
- MySQL用户及权限管理
- 【ArcGIS遇上Python】ArcGIS Python中文编码问题案例详解
- 剑指offer之判断链表是否包含环
- linux之hexdump命令