css flex 小记

flex: 1;
box-sizing:border-box;
overflow:scroll;
代码考出来自己看效果

<!DOCTYPE html>
<html><head><style>.div-f{display: flex;}.item_f{flex: 1;background-color: aqua;}.c-box{width: 100px;height: 100px;background-color: darkorange;}.c-box1{width: 100px;height: 100px;box-sizing: content-box;padding: 10px;border:2px solid #000;background-color: darkorange;}.b-box{width: 100px;height: 100px;background-color: darkorange;}.b-box1{width: 100px;height: 100px;box-sizing:border-box;padding: 10px;border:2px solid #000;background-color: darkorange;}.ssdd {width: 300px;height: 140px;background-color: darkorchid;overflow:scroll;}.fssdd{width: 600px;height: 100px;background-color: darksalmon;}</style></head><body><div class="div-f"><div class="item_f">dsdsd</div><div class="item_f" style="background-color: blueviolet;">dsdsd</div><div class="item_f" style="background-color:coral">dsdsd</div><div class="item_f" style="background-color:darkgreen">dsdsd</div></div><div class="div-f"><div class="item_f">dsdsd</div><div style="background-color: blueviolet;">dsdsd</div><div style="background-color:coral">dsdsd</div><div style="background-color:darkgreen">dsdsd</div></div><div class="c-box">content-box</div><div class="c-box1">content-box</div><div class="b-box">border-box</div><div class="b-box1">border-box</div><div class="ssdd"><div class="fssdd">123455677899009876543</div></div></body>
</html>

css flex 小记相关推荐

css flex属性学习笔记
参考文献 flex: 1 0calc((100% / min(var(--cx-active-view), var(--cx-max-views))) -var(--cx-split-gutter)) ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例注意:在下文中,将以parent指代父容器,item指代容器内的 ...
[css] flex布局的缺点有哪些？（除兼容性外）
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...
[css] flex与其他有什么不同，用它有什么好处？
[css] flex与其他有什么不同,用它有什么好处? flex 从根本上不同于之前常用的借助定位.浮动的布局.从逻辑思路上来说,flex 布局具有宏观性,提供了一种对于页面中元素如何排布的框架, ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
css flex 知乎,Oh My God，CSS flex-basis原来有这么多细节
//zxx: 为了演示方便,避免无谓的干扰,本文所有的尺寸均指水平尺寸,对应CSS均是宽度相关,例如width/min-width/max-width. 以前的我对flex-basis不屑一顾,以为就 ...
css flex 文字右对齐,css flex align-items属性交叉轴上对齐方式垂直对齐方式
css flex align-items属性交叉轴上对齐方式垂直对齐方式 css flex align-items属性子元素在交叉轴上对齐方式,如果不好理解,可以把flex-direction设置为 ...

css flex 小记

css flex 小记相关推荐

最新文章

热门文章