flex盒子布局
看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局!
1.概念(容器和项目)
在flex中,有容器和项目之分,但也只是相对的,假如说:div1里面有div2,div2里面有div3,而且他们都被定义为flex盒子:
div1相对于div2来说就是容器,div2相对于div1来说就是项目
div2相对于div3来说就是容器,div3相对于div2来说就是项目
这里的div2,既是容器,也是项目,取决与他的相对位置是谁。
2.对弹性盒子的定义
一般来说,只要父级被定义了display:flex;那么父级元素和里面的子集元素都会被定义为弹性盒子,孙子级别的标签却不会,如果想要成为弹性盒子,则需要在对应的子级元素上定义display:flex;
3.写在容器上的属性
- flex-direction[
row | row-reverse | column | column-reverse]
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
- flex-wrap[
nowrap | wrap | wrap-reverse
]nowrap
(默认):不换行wrap
:换行,第一行在上方wrap-reverse
:换行,第一行在下方
- flex-flow[
<flex-direction> || <flex-wrap>
](是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
) - justify-content[
flex-start | flex-end | center | space-between | space-around
]flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
- align-items[
flex-start | flex-end | center | baseline | stretch
]flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
- align-content[
flex-start | flex-end | center | space-between | space-around | stretch
]flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
4.写在项目上的属性
order[Number]
(定义项目的排列顺序。数值越小,排列越靠前,默认为0。)
flex-grow[Number](定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。)
flex-shrink[Number](定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小)
flex-basis[
<length> | auto
](定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小)
flex(是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选)
align-self[
auto | flex-start | flex-end | center | baseline | stretch]- auto:自动
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。baseline
:与交叉轴两端对齐,轴线之间的间隔平均分布。stretch
(默认值):轴线占满整个交叉轴。
注意:设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
(完!)
flex盒子布局的更多相关文章
- css3 flex盒子布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS3总结五:弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
- Flex box 弹性盒子布局
display: -webkit-flex 标识使用弹性布局 flex: num 占容器的比例 Flex等比划分 导航1 : Flex :1; 导航2 Flex: 2; ————&g ...
- 记一下flex弹性布局
flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...
- css横向 弹性盒子布局的一些属性
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
- flex弹性布局的基本介绍
最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...
- CSS:CSS弹性盒子布局 Flexible Box
一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局
移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...
随机推荐
- Mysql面试题及千万级数据查询优化
今天在说Mysql查询优化之前,我先说一个常见的面试题,并带着问题深入探讨研究.这样会让大家有更深入的理解. 一,Mysql数据库中一个表里有一千多万条数据,怎么快速的查出第900万条后的100条数据 ...
- 工厂模式在mvc模型中的应用
在web开发中我们常用mvc模式进行web应用的开发 当应用进入service 层的时候我们根据不同的业务多逻辑进行处理 当有数据进入controller的时候 public class Virtua ...
- ESP8266开发之旅 基础篇② 如何安装ESP8266的Arduino开发环境
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
- [NOIP2013提高组]华容道
这道题第一眼看是暴力,然后发现直接暴力会TLE. 把问题转换一下:移动空格到处跑,如果空格跑到指定位置的棋子,交换位置. 这个可以设计一个状态:$[x1][y1][x2][y2]$,表示空格在$(x1 ...
- ssd原理及代码实现详解
通过https://github.com/amdegroot/ssd.pytorch,结合论文https://arxiv.org/abs/1512.02325来理解ssd. ssd由三部分组成: ba ...
- vue系列---Mustache.js模板引擎介绍及源码解析(十)
mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...
- ORACLE定时备份方案
ORACLE定时备份方案 采用ORACLE的EXP工具,实现ORACLE的备份:采用LINUX的服务crond实现定时功能. 1 编辑SH,实现备份功能 #vi oracle_backup.sh,输入 ...
- OptimalSolution(3)--链表问题(2)进阶
一.环形单链表的约瑟夫问题 二.判断一个链表是否为回文结构 三.将单向链表按某只划分成左边小.中间相等.右边大的形式 四.复制含有随机指针节点的链表 五.两个单链表相交的一系列问题 六.将单链表的每K ...
- TCP Socket服务端客户端(二)
本文服务端客户端封装代码转自https://blog.csdn.net/zhujunxxxxx/article/details/44258719,并作了简单的修改. 1)服务端 此类主要处理服务端相关 ...
- Oracle运行脚本:exp,hist 和 err
上一篇我们讲到:首次使用rman备份数据库时,为了安全起见,我们应将整个数据库exp出来. 显而易见,每次都手敲exp代码是不可取的. ----费时费力还不规范! 为此,我们可以写一个exp脚本,之后 ...