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>
以上就是代码里写的知识点,鹅觉得基本够用了伐~***
知识点来源于看了视频哔哩哔哩-黑马程序员