flex弹性盒子模型
目录
1.弹性盒子模型可以以任意父容器为flex模型
2.他的布局位置可以在父容器中或在自身属性中
3.flex布局的优点
1.弹性盒子模型可以以任意父容器为flex模型
2.他的布局位置可以在父容器中或在自身属性中
父容器:
(1)flex-direction 属性:属性决定主轴的方向(即项目的排列方向)
属性值:
row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端column:主轴为垂直方向,起点在上沿column-reverse:主轴为垂直方向,起点在下沿
(2)flex-wrap属性默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
属性值:
nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。
(3)flex-flow属性:flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
(4)justify-content属性:定义了项目在主轴上的对齐方式。(水平方向)
属性值:
flex-start(默认值):左对齐flex-end:右对齐center: 居中space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。space-between:两端对齐,项目之间的间隔都相等。
(5)align-items属性定义项目在交叉轴上如何对齐。(垂直方向)
属性值:
flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐center:交叉轴的中点对齐baseline: 项目的第一行文字的基线对齐tretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
(6)align-content属性:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
属性值
flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。(height: auto时有效)
作为自身属性:
(1)order属性(排序)
定义项目的排列顺序。数值越小,排列越靠前,默认为0。
(2)flex属性 设置弹性盒子的子元素如何分配空间。
flex:6; /* 占6份*/flex:0 25%结合父元素的flex-wrap属性进行响应式分配
(3)margin属性(对齐)
设置"margin:auto"值,使得弹性子元素在两上轴方向上完全居中
3.flex布局的优点:
flex布局可以控制布局内元素是膨胀到整个父元素还是保持原本大小,是从左往右还是从右往左还是居中。两条轴线,四个维度,还是弹性的,这就使得用起来得心应手
flex弹性盒子模型相关推荐
- flex弹性布局之弹性盒子模型
一,flex弹性盒子布局 1. flex弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式.CSS3 弹性盒( Flexible Box 或 flexbox,是一种当页面需要适应不同的屏幕大小以及 ...
- 弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知: <!-- 单行显示省略号 --> .css {white-space: nowrap;overflow: hidden;text-overf ...
- Flex弹性盒子(一篇带你掌握潮流 Flex 布局)
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型 元素分类 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
- Flex弹性盒子详解:从量变到质变的理解
Flex弹性盒子 在前端css3中有个非常重要的属性,就是弹性盒子了,他在页面布局中起到的作用可谓是有着王霸之业,那么我们如何正确的使用flex布局呢?让我来介绍一下吧.我们可以将整个flex布局分成 ...
- 微信小程序---弹性盒子模型
1.弹性盒子布局 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为 ...
- css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- 弹性盒子模型属性之flex-grow
在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!! 今天就让我们先来看看flex-grow这个属性 flex- ...
最新文章
- tcp三次握手和syn 洪水攻击
- python中json.dump() 和 json.dumps() 有那些区别?
- IP5的接口模式运行测试
- 数据库IN查询参数化改造的方法
- 设计模式 之 桥接模式
- oc总结 --oc基础语法相关知识
- StatX 获250万美元融资,随时随地通知公司业务变化
- 现代通信原理14.2:M进制数字调制信号波形的向量表示
- OpenCore黑苹果引导配置说明-基于OpenCore-0.7.1-07-06正式版
- Nexus5 破解电信关键步骤
- 特殊字符是哪些字符python_python特殊字符
- Markdown基操
- 如何安装ps的滤镜插件
- 查询MYSQL数据库中所有的表
- SQL server 2000 标准版、企业版、开发版、个人版各版本之间的区别
- java石头人_宋玉成
- ismusicactive副作用_Android得到一个闹钟在第三方
- python创建虚拟环境慢_小灶时间-如果你还不会用Python虚拟环境
- [计算机通信网络]以太网的帧格式详解
- 2019上半年总结和下半年的目标