CSS 自适应布局(flex布局)

已知：
• 布局分为：父元素A和N个子元素B；
• A宽度不固定：最小宽度为1000px，内部边距是32px
• B的宽度不固定：相邻两个B元素的间距是16px，所有B的宽度相同，边框为1像素，颜色为999
• 每行只能有3个B元素，超过的话需要换行；
• 最左侧B元素和最右侧的B元素，距离A的边缘都是32px；

<div class="client-a"><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div><div class="client-b"></div>...
</div>

<style>
.client-a {min-width: 1000px;padding: 24px;display: flex;border: 1px solid #333;flex-wrap: wrap;justify-content: space-evenly;
}
.client-b {flex: 1 0 30%;box-sizing: border-box;margin: 8px;border: 1px solid #999;
}
</style>

效果图：

https://blog.csdn.net/shelbyandfxj/article/details/102564412?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-102564412-blog-120762926.pc_relevant_recovery_v2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-102564412-blog-120762926.pc_relevant_recovery_v2&utm_relevant_index=5

CSS 自适应布局(flex布局)相关推荐

css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
弹性布局(Flex布局)
弹性布局(Flex布局) 文章目录弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性以下六个属性设置在Flex容器上 flex-direction属性 ...
flex布局——flex布局
学习内容: 例如: 体验flex布局 flex布局父项常见属性 justify-content属性 flex-wrap属性 align-items属性 align-content属性 flex-flo ...
css浮动布局自适应,CSS | 自适应两栏布局方法
html代码: 固定宽度自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...
css基础精华---Flex 布局教程：实例篇
转载地址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2015/0 ...
html flex 文档流,【css笔记】- Flex 布局详细使用记录
寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到float属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版 ...
uc 开发缓存css,使用css3 flex布局在手机uc浏览器中一塌糊涂？
看了一篇flex的文章如获至宝,然后运用到项目中. 测试的时候别人的的手机都没有问题,但我手机用uc打开之后布局就没有起作用,不知是uc不支持 display:flex吗?那打击也太大了,代码如下 u ...
HTML/CSS布局—Flex布局(弹性布局)
目的:能够使用Flex布局模型灵活.快速的开发网页 Flex布局/弹性布局: 是一种浏览器提倡的布局模型布局网页更简单.灵活避免浮动脱标的问题作用: 基于 Flex 精确灵活控制块级盒子的布局方 ...

CSS 自适应布局(flex布局)

CSS 自适应布局(flex布局)相关推荐

最新文章

热门文章