flex布局，居中对齐，垂直对齐，对齐。。。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;
text align centerborder: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:verse/verse</p>
</li>
<li>
<p id='matter'>verses是主轴横向排列（从左向右排列）/row的⽔平翻转从右向左排列，同理纵向排列，，，</p>
</li>
</ul>
</div>
<!--verse-->
<div id='font'>row-reverse：主轴为横向从右⾄左排列</div>
<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>
<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>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 >短短⼀⾏字，是⼩可爱⼀天的青春~~^*^~~</p> </body>
</html>
~
以上就是代码⾥写的知识点，鹅觉得基本够⽤了伐***
知识点来源于看了视频
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论