一、骰子布局
单项目
分别对骰子的1~9个点进行通过代码来实现
首先对单一点就行布局。
首先以为flex布局具有自身的默认属性，所以想要实现在正方形的左上方放一个点，只要在父级加上一行采用flex布局就可以实现.
/*左对齐*/
.first-item {
width: 100px;
height: 100px;
display: flex;
border: solid 1px black;
}
.pip{
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #333;
}
左对齐实现结果
接下来设置的对齐方式是居中对齐和右对齐。
/*居中*/
.first-item {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
border: solid 1px black;
}
居中实现结果
/*右对齐*/
.first-item {
width: 100px;
height: 100px;
display: flex;
justify-content: flex-end;
border: solid 1px black;
}
右对齐实现结果
当我们设置交叉轴对齐的当时，就是在上述的记住上，移动主轴。可以实现垂直的移动主轴。，对其中的几个例子进行说明。
/*中轴线左对齐*/
.first-item {
width: 100px;
height: 100px;
display: flex;
align-items: center;
border: solid 1px black;
}
中轴线左对齐的实现结果
/*中轴线居中对齐*/
.first-item {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px black;
}
中轴线居中对齐实现
/*交叉轴下对齐*/
.first-item {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-end;
border: solid 1px black;
}
交叉轴下对齐实现
.first-item {
width: 100px;
height: 100px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
border: solid 1px black;
}
将圆放在右下角
双项目
.first-item {
width: 100px;
height: 100px;
display: flex;
justify-content: space-between;
border: solid 1px black;
}
space-between用法
如果想要进行上下布局的话，采用flex-direction属性的 column的值。如果想要这两个圆向中间进行移动，就采用align-items: center;属性，想要两个远点都偏向右侧，使用属性align-items: flex-end;
对两个点分布到两个角的布局进行实现，实现的结果和代码如下：
.first-item {
width: 100px;
height: 100px;
display: flex;
justify-content: space-between;
border: solid 1px black;
}
.pip:nth-child(2){
align-self: flex-end;
}
实现结果
三项目
.first-item {
width: 100px;
height: 100px;
display: flex;
justify-content: space-between;
border: solid 1px black;
}
.pip:nth-child(2){
align-self: center;
}
.pip:nth-child(3){
align-self: flex-end;
}
三项目的布局的实现的结果的截图为:
上项目的实现结果的样式
二、网格布局
最简单的布局是网格布局，也就是平均布局。在一个容器内进行空间的平均分配。
网格布局实现截图
.grid{
width: 200px;
height:100px;
border: solid 1px black;
display: flex;
}
.grid-cell{
border: solid 1px burlywood;
flex: 1;
}
<div class = 'grid'>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
三、百分比布局
是网格布局的一种特例，就是某一个网格的宽度固定，其余的网格平均分配剩余的空间。比如说第一个格子占据70%，剩下的两个格子的宽幅自适应填满整个空间。
百分比布局
.grid{
width: 200px;
height:100px;
border: solid 1px black;
display: flex;
}
.grid-cell{
border: solid 1px burlywood;
flex: 1;
}
.u-loft1{
flex: 0 0 70%;
}
<div class = 'grid'>
<div class="grid-cell u-loft"></div>
<div class="grid-cell"></div>
<div class="grid-cell "></div>
</div>
四、圣杯布局
圣杯布局是现在一种常见的网站的布局，从上到下分为：header、body、footer。其中对body可以进行进一步划分导航栏、主栏、副栏。
圣杯布局的实现效果
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer{
flex: 1;
}
.HolyGrail-body{
background-color: blue;
display: flex;
flex: 1;
}
.HolyGrail-content{
background-color: greenyellow;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads{
flex: 0 0 12em;
}
.HolyGrail-nav{
background-color: firebrick;
order: -1;
}
header{
background-color: powderblue;
}
footer{
background-color: darkturquoise;
}
/*如果是小屏幕，躯干的三栏自动变为垂直叠加。*/
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
<div class = 'HolyGrail'>
<header></header>
<div class="HolyGrail-body">
<main class ='HolyGrail-content'></main>
<nav class ="HolyGrail-nav"></nav>
<aside class = "HolyGrail-ads"></aside>
</div>
<footer></footer>
</div>
五、输入框布局
简单的来说就是在输入框前面添加提示，在输入框后面添加按钮。
输入框布局
.InputAddOn{
width: 300px;
display: flex;
}
.InputAddOn-field{
flex: 1;
}
.InputAddOn-logo{
border: solid red 1px;
}
<div class='InputAddOn'>
<div class = 'InputAddOn-logo'></div>
<input class='InputAddOn-field'></input>
<button class="InputAddOn-logo"></button>
</div>
六、悬挂式布局
就是在主栏的左边或是右边需要添加一个图片栏，这样的布局被称为悬挂式布局。
悬挂式布局
实现代码为：
.media{
height: 200px;
width: 200px;
display: flex;
border: solid green 1px;
align-items: flex-start;
}
.media-figure{
height: 50px;
width: 50px;
border: solid red 1px;
margin-left: 1em;
}
.media-body{
/*清空默认的样式*/
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
border: solid black 1px;
flex: 1;
}
七、固定的底栏
我们在制作网页的时候，由于页面的内容太少，不能做到占满整个屏幕，这样的话底栏就会被提高到页面的中间，这个时候可以采用Flex布局，让底栏出现在页面的底部。
实现结果：
固定的的底栏
实现的代码：
.site{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.site-content{
border: solid 1px black;
flex: 1;
}
footer{
border: solid 1px red;
}
<body class='site'>
<header>header</header>
<main class = 'site-content'></main>
<footer>footer</footer>
</body>
网友评论