CSS --- flexbox弹性盒子布局（不用浮动一行显示）

时间 2019-11-12

标签 css flexbox 弹性盒子布局不用浮动一行显示栏目 CSS 繁體版

原文原文链接

代码以下~html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{ margin:0;}
.box{ display:flex; height:300px; /* flex-direction:column; 竖方向的 */ /*flex-direction:column-reverse; 竖方向倒过来*/}
.div1{ background:red; flex:1}
.div2{ background:blue; flex:2}

</style>
</head>

<body>
<div class="box">
    <div class="div1">111</div>
    <div class="div2">222</div>
</div>
</body>
</html>

1. CSS弹性盒子Flexbox布局详解
2. Flexbox 弹性盒子布局
3. flexbox弹性盒子布局教程（一）
4. FlexBox弹性盒布局
5. Flexbox（弹性盒子）
6. CSS3弹性盒模型flexbox布局
7. flexbox弹性盒子布局教程（二）flexbox基本概念
8. CSS 弹性浮动布局应用
9. CSS3弹性盒子布局
10. Flexbox【弹性盒子模型】
更多相关文章...
• 使用 CSS 显示 XML - XML 教程
• 使用 XSLT 显示 XML - XML 教程
• SpringBoot中properties文件不能自动提示解决方法
• JDK13 GA发布：5大特性解读

最新文章

1. 吴恩达深度学习--神经网络的优化(1)
2. FL Studio钢琴卷轴之工具菜单的Riff命令
3. RON
4. 中小企业适合引入OA办公系统吗？
5. 我的开源的MVC 的Unity 架构
6. Ubuntu18 安装 vscode
7. MATLAB2018a安装教程
8. Vue之v-model原理
9. 【深度学习】深度学习之道：如何选择深度学习算法架构

本站公众号

欢迎关注本站公众号,获取更多信息

1. CSS弹性盒子Flexbox布局详解
2. Flexbox 弹性盒子布局
3. flexbox弹性盒子布局教程（一）
4. FlexBox弹性盒布局
5. Flexbox（弹性盒子）
6. CSS3弹性盒模型flexbox布局
7. flexbox弹性盒子布局教程（二）flexbox基本概念
8. CSS 弹性浮动布局应用
9. CSS3弹性盒子布局
10. Flexbox【弹性盒子模型】

>>更多相关文章<<

CSS --- flexbox弹性盒子布局（不用浮动 一行显示）

CSS --- flexbox弹性盒子布局（不用浮动一行显示）