flex弹性盒子布局

子元素盒子居中,flex属性加在父元素身上，而不是自身

    <h3>子元素盒子居中,flex属性加在父元素身上，而不是自身</h3><div class="box1"><div>box1</div></div>h3{margin-top: 20px;}.box1{width: 400px;height:300px;border:1px solid red;text-align: center;display:-webkit-flex;justify-content:center;align-items:center;}.box1 div{width:200px;height:200px;background-color:pink;}

按比例自适应带一个固定宽度默认 flex-direction:row; 所以这里没写下面的横向加了因为默认的所以没加

   <h3>按比例自适应带一个固定宽度</h3><div class="box2"><div>1</div><div>2</div><div>3</div></div>.box2{display:-webkit-flex;width: 400px;}.box2 div:nth-of-type(1){width:100px;background-color:red;}.box2 div:nth-of-type(2){flex:2;background-color:pink;}.box2 div:nth-of-type(3){flex:3;background-color:blue;border:4px solid black;}

按比例自适应完全按比例-横向

   <h3>按比例自适应完全按比例-横向</h3><div class="box3"><div>1</div><div>2</div><div>3</div></div>.box3{width: 400px;display:-webkit-flex;flex-direction:row;}.box3 div:nth-of-type(1){flex:1;background-color:red;}.box3 div:nth-of-type(2){flex:2;background-color:pink;}.box3 div:nth-of-type(3){flex:3;background-color:orange;}

按比例自适应完全按比例-纵向 flex-direction:column; 需要说明不是默认的默认是横向也就是 flex-direction:row;

   <h3>按比例自适应完全按比例-纵向</h3><div class="box4"><div>1</div><div>2</div><div>3</div></div>.box4{display:-webkit-flex;flex-direction:column;width: 400px;}.box4 div:nth-of-type(1){flex:1;background-color:red;}.box4 div:nth-of-type(2){flex:2;background-color:pink;}.box4 div:nth-of-type(3){flex:3;background-color:orange;}

转载于:https://www.cnblogs.com/Model-Zachary/p/6435405.html

flex弹性盒子布局相关推荐

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

flex弹性盒子布局

子元素盒子居中,flex属性加在父元素身上，而不是自身

按比例自适应带一个固定宽度默认 flex-direction:row; 所以这里没写下面的横向加了因为默认的所以没加

按比例自适应完全按比例-横向

按比例自适应完全按比例-纵向 flex-direction:column; 需要说明不是默认的默认是横向也就是 flex-direction:row;

flex弹性盒子布局相关推荐

最新文章

热门文章

flex弹性盒子布局

子元素盒子居中,flex属性加在父元素身上，而不是自身

按比例自适应带一个固定宽度 默认 flex-direction:row; 所以这里没写 下面的横向加了 因为默认的所以没加

按比例自适应完全按比例-横向

按比例自适应完全按比例-纵向 flex-direction:column; 需要说明 不是默认的 默认是横向 也就是 flex-direction:row;

flex弹性盒子布局相关推荐

最新文章

热门文章

按比例自适应带一个固定宽度默认 flex-direction:row; 所以这里没写下面的横向加了因为默认的所以没加

按比例自适应完全按比例-纵向 flex-direction:column; 需要说明不是默认的默认是横向也就是 flex-direction:row;