flex布局入门
一、简介
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布局入门的更多相关文章
- CSS布局-flex布局入门教程
前言 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. 查询兼容 F ...
- flex布局入门总结——语法篇
前几天看了阮一峰的Flex布局教程,讲的很不错,总结一下,有兴趣的可以去看原文http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一 F ...
- React Native入门教程 3 -- Flex布局
上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 小白入门篇:flex布局
--前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- flex布局应用于踩坑
一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- 30分钟彻底弄懂flex布局
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...
- flex布局应用与踩坑
一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...
随机推荐
- MAPPO学习笔记(2) —— 从MAPPO论文入手
在有了上一节一些有关PPO算法的概念作为基础后,我们就可以正式开始对于MAPPO这一算法的学习. 那么,既然要学习一个算法,就不得不去阅读提出这一算法的论文.那么本篇博客将从MAPPO的论文出发,对M ...
- es6 新增 set 和 map数据结构以及应用场景
https://www.cnblogs.com/sexintercourse/p/12269580.html Set数据容器,这是一个能够存储无重复值的有序列表. 1. 创建集合 set let se ...
- JS Bom（window）对象
window 是客户端浏览器对象模型的基类,window 对象是客户端 JavaScript 的全局对象.一个 window 对象实际上就是一个独立的窗口,对于框架页面来说,浏览器窗口每个框架都包含一 ...
- React 监听页面滚动，界面动态显示
以下是常见的监听滚动以及相应的操作 窗口滚动事件 当页面滚动时,如何动态切换布局/样式 1. 添加滚动事件的监听/注销 1 //在componentDidMount,进行scroll事件的注册,绑定一 ...
- 【性能】JDK和Jmeter的安装与配置
一.JDK环境配置 1. 下载JDK 官网下载地址:http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downl ...
- 小米商城主页展示HTML+CSS
大佬们呀,花了好几天的时间总算是看着页面展示可以了,求赐教! 小米商城主页,对大佬来说肯定简单爆了,我抄写了好久呀,总是有一点点的小问题,还搞不明白 主要是一个静态的小米商城页面,HTML前端代码不复 ...
- 2022-06-01：给定一个数组arr，可能有正、有负、有0，无序。 只能挑选两个数字，想尽量让两个数字加起来的绝对值尽量小。 返回可能的最小的值。
2022-06-01:给定一个数组arr,可能有正.有负.有0,无序. 只能挑选两个数字,想尽量让两个数字加起来的绝对值尽量小. 返回可能的最小的值. 答案2022-06-01: 排序,双指针. 代码 ...
- 2021-06-19：交错字符串。 有三个字符串s1,s2,s3。判断s3是否由s1和s2交错组成的。比如s1=“abc“,s2=“123“,s3=“12ab3c“，应该返回true，因为s3去掉12
2021-06-19:交错字符串. 有三个字符串s1,s2,s3.判断s3是否由s1和s2交错组成的.比如s1="abc",s2="123",s3=" ...
- CHS、LAB地址
CHS地址 CHS地址指的是柱面(Cylinder).磁头(Head).扇区(Sector)三个参数组成的地址,是用来表示磁盘上每个扇区位置的一种方式. 物理扇区号 = ((柱面号×磁头数) + 磁头 ...
- WPF中关于转换器
实例:关于播放器按钮状态的改变 说明:对Kind(种类)的绑定首先在viewmodel中声明一个属性IsPlay,然后在转换器中实现按钮的状态 转换器 在解决方案中的项目里新建一个Converters ...