使用 弹性布局 可以开发自动适应div大小按比例大小占用
html代码如下 :
<div class="box">
<div class="item" style="flex-grow: 1"></div>
<div class="item" style="flex-grow:2"></div>
<div class="item" style="flex-grow:1"></div>
</div>
flex-grow 属性设置当前块所占比例大小
CSS代码如下:
.box{
width: 500px;
height: 300px;
background: pink;
display: flex;
}
.item{
background: red;
margin: 10px;
}
效果图:
* 弹性布局 * 创建弹性布局容器:flex containerdisplay:flex 1.弹性元素 flex ...
内容参考pink老师笔记。 一、flex布局原理 flex 是 flexible Box 的缩写，意为“弹性布局”...
认识flex布局 flex布局（Flexible 布局，弹性布局）开启了flex布局的元素叫flex contai...
W3弹性布局： 弹性布局父容器(Flex Containers) 弹性布局子项(Flex Items) 子项于父容...
1、什么是flex布局？ flex布局又叫弹性布局，弹性盒子，与怪异和模型布局不同，其布局能更精准。 2、如何设置...
Flex Flex：弹性布局 React Native 的默认布局是flex布局 如果将父元素设置成弹性盒模型模式...
一、介绍Flex布局 什么是Flex布局呢？Flex布局：又称弹性布局，它是Flexible Box 的缩写，它为...
一、flex布局介绍： 1、又名Flexible 布局，弹性布局；2、开启了 flex 布局的元素叫 flex c...
弹性布局(flex)： 30分钟彻底弄懂flex布局
Flex，(Flexible Box），意为"弹性布局"采用 Flex 布局的元素，为 Flex 容器（flex ...
本文标题：flex 布局 弹性布局 笔记
本文链接：https://www.haomeiwen.com/subject/rxgfdxtx.html
网友评论