<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>弹性盒子</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-item {
width: 300px;
height: 200px;
margin: 10px;
background-color: orange;
/*display: inline-block;*/
/*float: left;*/
}
/*
使用flex布局的元素称之为flex容器,.flex-container内的子元素自动成为容器成员称之为flex项目
父项属性: 掌握
-- flex-direction: 主轴方向;
-- justify-content: 主轴上子元素的排列方式;
-- flex-wrap: 设置子元素是否换行;
-- align-items: 设置侧轴上子元素的排列方式(单行);
-- flex-flow: 符合属性,相当于同时设置 flex-direction 和 flex-wrap;
子项的属性:
-- flex: 子项目占的分数; 掌握
-- align-self: 控制子项本身在侧周的排列方式; 了解
-- order: 定义子项的排列顺序; 了解
弹性盒模型中,其他元素正常渲染,弹性盒子只定义弹性子元素如何在容器中布局
*/
</style>
</head>
<body>
<div class="flex-container">
<!-- <div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div> -->
<span class="flex-item">1</span>
<span class="flex-item">2</span>
<span class="flex-item">3</span>
</div>
</body>
</html>
08-22
2071
2071
08-21
489
489
10-06
721
721
09-03
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
