flex布局，居中对齐，垂直对齐，对齐。。。
flex的基本内容解释：1.红色是主要知识点，橘色是细节内容，图片是样例2.具体内容在代码里面哟后面有简单的总结^*^~~*<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Flex布局</title><script src="js/vue.js" typ
·
flex的基本内容
解释：
1.红色是主要知识点，橘色是细节内容，图片是样例
2.具体内容在代码里面哟
后面有简单的总结^*^~~*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flex布局</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
#row,#center,#items,#column,#align-content
{
display:flex;
width:150px;
height:150px;
background:blanchedalmond;
flex-direction:row-reverse;
border:0.9px skyblue solid;
margin: 0 auto;
}
#center
{
justify-content:center;
flex-wrap:wrap;
}
#column
{
background:orange;
flex-direction:column;
}
#items
{
flex-direction:row;
align-items:center;
}
#align-content
{
flex-direction:row;
flex-wrap:wrap;
align-content:space-between;
}
span span,#center span,#align-content span,#align-self span
{
width:40px;
height:40px;
background:blueviolet;
/*文字居中对齐*/
text-align:center;
line-height:40px;
color:white;
}
#items span
{
width:40px;
background:blueviolet;
text-align:center;
}
#matter
{
color:orange;
}
#mmatter
{
color:red;
}
#font
{
display:block;
text-align:center;
font-size:7px;
}
#flex,#align-self
{
display:flex;
width:150px;
height:150px;
background:blanchedalmond;
border:0.9px skyblue solid;
margin: 0 auto;
}
#flex span:nth-child(1)
{
display:flex;
width:40px;
height:40px;
background:orange;
}
#flex span:nth-child(3)
{
display:flex;
width:40px;
height:40px;
background:orange;
}
#flex span:nth-child(2)
{
display:flex;
flex:1;
background:blueviolet;
}
#align-self
{
justify-content:space-around;
align-items:center;
}
#align-self span:nth-child(1)
{
align-self:flex-end;
}
#align-self span:nth-child(4)
{
order:1;
}
#align-self span:nth-child(4)
{
align-self:flex-end;
}
</style>
</head>
<body>
<div>
<ul>
<li id='mmatter'>flex是父元素的属性，通过父亲属性控制孩子的排列方式（一个父亲只有一个排列方式）-display:flex;，且默认是按主轴排列
</li>
<li>
<p id='matter'>排列方式有：flex-direct:row/row.reverse/column/column.reverse</p>
</li>
<li>
<p id='matter'>row/row.reverses是主轴横向排列（从左向右排列）/row的水平翻转从右向左排列，同理纵向排列，，，</p>
</li>
</ul>
</div>
<!--flex-direction:row.reverse-->
<div id='font'>row-reverse:主轴为横向从右至左排列</div>
<span id="row">
<span>
1
</span>
<span>
2
</span>
<span>
3
</span>
</span>
<!--flex-direction:column-->
<div id="font">column:主轴为竖向默认从上往下</div>
<span id="column">
<span>4</span>
<span>5</span>
<span>6</span>
</span>
<ul>
<li id='mmatter'>
<p >首先要确定主轴的排列方式，通过justify-content设置对齐方式</p>
</li>
<li >
<p id='matter'>通过:justify-content:center（居中对齐）/flex-start（左对齐）/flex-end（右对齐/下对齐）/space-around（均匀分布）/space-bettwen(先帖两边，后均匀分布) 来设置对齐方式</p>
</li>
<li id='mmatter'>
<p >按主轴排列，当元素所需区域大于父元素时不会主动换行，通过flex-wrap设置换行</p>
</li>
<li id='matter'>
<p>默认的是：nowrap-主动调节宽度/高度使子元素适应父元素（不换行）通过：：flex-wrap:wrap;</p>
</li>
</ul>
<!--justify-content/flex-wrap-->
<div id='font'>子元素居中对齐且换行</div>
<div id='center'>
<span>c1</span>
<span>c2</span>
<span>c3</span>
<span>c4</span>
<span>c5</span>
</div>
<!--align-items侧轴对齐设置-->
<ul>
<li id="mmatter">
<p>由于justify-center是依据主轴对齐的，所以想要侧轴也要对齐则也需要:align-items</p>
</li>
<li>
<p id="matter">通过：align-items:flex-start,flex-end,center,stretch(拉伸：子元素的高度和父元素一样，所以不设置子元素高度)</p>
</li>
</ul>
<p id="font">垂直居中对齐（侧轴（align-items）主轴(justify-content)都为center）</p>
<span>
<div id="items">
<span>嘻</span>
<span>嘻</span>
<span>嘻</span>
</div>
</span>
<!--align-content对于多行的侧轴对齐设置-->
<ul>
<li id="mmatter">以上是针对单行内容，要想设置多行内容的排列（设置测轴）需要align-content</li>
<li id="matter">align-content:flex-start,flex-end,center,stretch,space-around(均匀分布),space-between(先贴两边，后均匀分布)</li>
</ul>
<p id="font" >多行文本先贴边后均匀分布</p>
<div id='align-content'>
<span>嘻</span>
<span>嘻</span>
<span>嘻</span>
<span>哈</span>
<span>哈</span>
<span>哈</span>
</div>
<!--flex解决分布问题-->
<p id="font" >实现贴边分布后中间再分布</p>
<ul>
<li id="mmatter">
flex:<number>是用来分配剩余空间的，默认为0（不显示），所以当剩余空间的分配给一个的对象时，无论flex值（>=1）为多少都占满所有剩余空间
</li>
<li>
<p id="matter">有多个对象参与分配，则平均后按比例分配eg.A:flex:1 A:flex:2 则A占剩余空间的1/3，B占2/3</p>
</li>
<li>
<p id="matter">#/./标签...:nth-child(number)可为对应子元素设置样式</p>
</li>
</ul>
<p id="font">设置不均分配（一个固定高宽，剩余的按比例分配）</p>
<div id='flex'>
<span></span>
<span></span>
<span></span>
</div>
<!--align-self,order解决特殊问题-->
<ul>
<li id="mmatter">align-self是针对某个子元素，且他会覆盖align-items的值</li>
<li id="mmatter">order是移动元素位置，默认为0，值为n则移动n位（+右移，-左移），其余元素依次挪动（不是元素替换，只是移动）</li>
</ul>
<p id="font">改变第一个和最后一个元素的位置，并交换我/她</p>
<div id='align-self'>
<span>他</span>
<span>你</span>
<span>和</span>
<span>我</span>
<span>她</span>
</div>
<ul>
<li>单个标签的内容居中：</li>
</ul>
<ol id="mmatter">
<li>block块积元素:要设置width为具体值才可以用margin:0 auto;使其居中</li>
<li>block块积元素：直接text-align:center也可使其居中</li>
<li>block块积元素可以自动换行，但不可调节高度，inline行积元素是连续的，知道占满一行才换行，所以不能调节高度</li>
<li>害，鹅也只会这点的皮毛了，其他高端的我也不造了ya~~^<^</li>
</ol>
<p id="font">总结：-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
<ol>oder和align-self是用于子元素的，其余都是父元素的属性</ol>
<ol>
<li>justify-content:主轴分布</li>
<li>align-items:侧轴分布</li>
<li>align-content:对于多行的侧轴分布</li>
c<li>flex-flow:同时设置flex-direction flex-wrwp</li>
<li>align-self/order:个别元素特殊位置的设置</li>
</ol>
<p style="color:pink;text-align:center;">短短一行字，是小可爱一天的青春~~^*^~~</p>
</body>
</html>
以上就是代码里写的知识点，鹅觉得基本够用了伐~***
知识点来源于看了视频哔哩哔哩-黑马程序员
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献6条内容
所有评论(0)