弹性盒子布局 Flexbox Layout

在这里插入图片描述

在这里插入图片描述
可以嵌套下去

在这里插入图片描述
1.display 属性
默认行排列

<style>.flex-item{
height: 20px;width: 10px;background-color: #f1f1f1;margin: 10px;}</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>

此时是列拍
在这里插入图片描述

<style>.flex-item{
height: 20px;width: 10px;background-color: #f1f1f1;margin: 10px;}.flex-container{display:flex;}  </style>

在这里插入图片描述

flex-direction属性——行布局 row
在这里插入图片描述
列布局：column

flex-wrap 属性折叠在这里插入图片描述

flex-flow属性
包括 flex-direction 和flex-wrap

flex-flow: row wrap
行排列折叠
在这里插入图片描述

justify-content属性元素在主轴上的对齐方式在这里插入图片描述
左对齐居中对齐右对齐

在这里插入图片描述

两端对齐拉手对齐

align-items属性元素在辅轴上的对齐方式
在这里插入图片描述
上端对齐居中对齐底部对齐

align-items: stretch
注意：去掉元素高度

<style>.flex-container {display: flex; /* 转成flex格式*/justify-content: space-between; /*元素在主轴上的对齐 两端对齐 */flex-direction:row; /*行排列*/align-items:stretch; /*如果项目未设置高度或设为auto，将占满整个容器的高度。 */width:500px;height:200px;border:1px dashed;/* 虚线*/}.flex-item {width:100px;border:1px solid;font-size:20px}</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>
</div>

在这里插入图片描述

 <style>#flexbox{display:flex;justify-content:center;align-items:center;border:1px solid ;
flex-direction:row; /*行排列*/width:200px;height:200px;}#flexitem{width:100px;
height:100px;border:1px solid red;background-color:red;}

flex-grow属性元素被拉大的比例，按比例分配容器剩余空间（1）默认值为0: 元素不占用剩余空间
（2）取值为n: 元素占据剩余空间若干份中的n 份

<style>.flex-container {display: flex; /* 转成flex格式*/flex-direction:row; /*行排列*/align-items:stretch; /*如果项目未设置高度或设为auto，将占满整个容器的高度。 */}.flex-item { border:1px solid black; }div:nth-child(1) { flex-grow:1; } /* 设置第一个项目比例为1份 */div:nth-child(2) { flex-grow: 1; } /* 设置第二个项目比例为1份*/div:nth-child(3) { flex-grow: 2; } /* 设置第三个项目比例为2份 */</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>
</div>
</body>

在这里插入图片描述

<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;
}#container{margin:0 auto;width:500px;height:400px;}#header{display:flex;flex-direction:row;/* 行排列*/justify-content:center;/* 水平居中*/align-items:center;/* 垂直居中*/border:1px solid black;font-size:30px;color:white;background-color:purple;margin-bottom:5px;weight:500px;height:100px;}#main{margin-bottom:10px;weight:500px;}#left{display:flex;flex-direction:column;/* 垂直排列*/justify-content:center;/* 水平居中*/float:left; /* 左浮动*/width:240px;height:200px;margin-right:10px;background-color:#ccc;font-size:20px;}#right{display:flex;flex-direction:column;/* 垂直排列*/justify-content:center;/* 水平居中*/float:left; /* 左浮动*/width:240px;height:200px;background-color:#ccc;font-size:20px;}#footer{display:flex;flex-direction:column;/* 垂直排列*/justify-content:center;/* 水平居中*/
float:left; /* 左浮动*/width:490px;height:100px;margin-top:10px;background-color:#ccc;font-size:20px;}p{font-size:15px; margin-top:10px; }</style>
</head>
<body>
<div id="container"><div id="header">web前端开发</div><div id="main"><div id="left">HTML<p>超文本标记语言，用于构建网页结构，定义网页包括的内容.</p></div><div id="right">CSS <p>层叠样式表，用于构建网页布局，外观，美化页面</p></div></div><div id="footer">JavaScript <p>JavaScripe,脚本语言，用于构建网页行为，与用户进行交互，使用户获得更好的体验</p></div>
</div>
</body>

这是用flex布局写得更简单点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/* 整体容器样式 */#container {margin: 0 auto;width: 500px;height: 400px;display: flex;flex-direction: column;/*垂直方向为列布局*/align-items: center;/*  在主轴方向（垂直方向）上居中对齐容器内部元素 */}/* 顶部标题样式 */#header {width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;  /* 垂直居中对齐*/border: 1px solid black;font-size: 30px;color: white;background-color: purple;margin-bottom: 5px;}/* 主体内容区样式 */#main {display: flex;justify-content: space-between; /*两端对齐*/width: 100%;margin-bottom: 10px;}/* 左侧内容块样式 */#left {flex: 1; /*flex-grow, flex-shrink, 和 flex-basis*/display: flex;flex-direction: column;justify-content: center;width: 240px;height: 200px;margin-right: 10px;background-color: #ccc;font-size: 20px;}/* 右侧内容块样式 */#right {flex: 1;display: flex;flex-direction: column;justify-content: center;width: 240px;height: 200px;background-color: #ccc;font-size: 20px;}/* 底部内容样式 */#footer {width: 100%;display: flex;flex-direction: column;justify-content: center;margin-top: 10px;background-color: #ccc;font-size: 20px;height: 100px;}p {font-size: 15px;margin-top: 10px;}</style>
</head>
<body>
<div id="container"><!-- 顶部标题 --><div id="header">web前端开发</div><!-- 主体内容区 --><div id="main"><!-- 左侧内容块 --><div id="left">HTML<p>超文本标记语言，用于构建网页结构，定义网页包括的内容.</p></div><!-- 右侧内容块 --><div id="right">CSS <p>层叠样式表，用于构建网页布局，外观，美化页面</p></div></div><!-- 底部内容 --><div id="footer">JavaScript <p>JavaScripe,脚本语言，用于构建网页行为，与用户进行交互，使用户获得更好的体验</p></div>
</div>
</body>
</html>