css3移动端flex弹性盒子布局

这是两个新旧的风格。

设置弹性盒子：

display: -webkit-box;(-webkit-box-flex,-webkit-box-orient:vertical,-webkit-box-align和-webkit-box-pack)

display: -webkit-flex;(-webkit-flex,-webkit-flex-flow:column,-webkit-align-items: center,-webkit-justify-content: center;)

设置垂直排列：

-webkit-box-orient: vertical;

-webkit-flex-flow: column;

设置flex：flex决定了占的宽或高的比例

-webkit-box-flex: 1;
-webkit-flex: 1;

确定子元素的排列顺序：是正常顺序还是反排顺序：

box-direction：normal || reverse

盒子内部剩余空间如何使用：

水平方向： -webkit-box-align: start || end || center || baseline || stretch(默认)

其中stretch为默认值，为拉伸，也就是父标签高度过高，其孩子元素的高度就多高，以后等高布局不用愁了。start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐。

竖直方向：-webkit-box-pack:start || end || center || justify

就大部分的行为表现来说分别对应text-align属性的值：left | right | center | justify；

-webkit-align-items: flex-start,flex-end,center

-webkit-justify-content:flex-start,flex-end,center

css3移动端flex弹性盒子布局相关推荐

HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
Vue.js-Day08【项目实战(附带完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
Flex 弹性盒子布局
CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行.它不使用浮动,fle ...
css3 flex弹性盒子布局梳理，打通任督二脉
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...
Flex 弹性盒子布局使用教程
本教程源自对大漠老师的一个完整的Flexbox指南和阮一峰老师的Flex布局教程语法篇和实例篇的学习和整理,仅作为知识整理和分享,不作任何商业用途. 本教程分为语法篇和实例篇和传统布局比较传统的 ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
html弹性盒子垂直排列,css3弹性盒子布局
css3弹性盒子布局 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是 ...
CSS3弹性盒子布局
弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方式.引入弹性盒 ...
弹性盒子布局(Flex)，做项目必会技能
弹性盒子布局flex 开启flex属性布局display:flex flex-direction 主轴排列 justify-content 子项对齐方式 align-item属性:设置元素在交叉轴上的 ...

css3移动端flex弹性盒子布局

css3移动端flex弹性盒子布局相关推荐

最新文章

热门文章