¡Acostúmbrate a escribir juntos! Este es el sexto día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento
prefacio
En escenarios de aplicaciones reales, generalmente nos encontramos con varios dispositivos de diferentes tamaños y resoluciones. Para diseñar correctamente la interfaz de nuestra aplicación en todos estos dispositivos, necesitamos un método de diseño de interfaz receptivo para satisfacer completamente las necesidades de este complejo diseño.
La ventaja del modelo de caja elástica flexible es que los desarrolladores solo necesitan declarar el comportamiento que debe tener el diseño, sin dar un método de implementación específico. El navegador es responsable de completar el diseño real. Cuando el diseño implica un ancho indeterminado, la distribución está alineado Cuando se da prioridad al diseño de flexbox.
gramática
dirección flexible: ajusta la dirección del eje principal
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
复制代码justificar-contenido se utiliza principalmente para establecer la alineación de la dirección del eje principal
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。
复制代码align-items se utiliza para ajustar la alineación del eje lateral
flex-start： 元素在侧轴的起始位置对齐。
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。
复制代码La propiedad flex-wrap controla si el contenedor flexible es de una sola línea o de varias líneas, y no se ajusta de forma predeterminada
nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。
复制代码align-content se utiliza para establecer la disposición de los contenedores flexibles de varias líneas
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。
复制代码Pequeña demostración
cambio de eje flexible
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
复制代码<style>
/* *{
margin:0;
padding:0;
} */
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
/* 主轴侧轴相互调换,而且主轴侧轴上的属性依旧可以使用，属性跟随轴一起走 */
/* 默认 主轴水平 */
/* flex-direction: row; */
/* 切换 主轴垂直 */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
align-items: center;
justify-content: space-between;
}
li {
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码envoltura flexible
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
</ul>
复制代码 <style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
/* 默认不换行 */
/* flex-wrap: nowrap; */
/* 换行 */
flex-wrap: wrap;
}
li {
/* 弹性布局中，如果一排放不下，会压缩 */
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码alineación del eje del lado flexible
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
</ul>
复制代码<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
flex-wrap: wrap;
flex-direction:column;
/* 单行和多行的区别 通过查看是否有换行属性 */
/* 无论是否生效，都不能够混用！！！！ */
/* 单行 */
/* align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: stretch; */
/* 多行 */
/* align-content: center; */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* 两端对齐，剩余平分 */
/* align-content: space-between; */
/* 每一个元素都拥有属于自己的间隙 */
/* align-content: space-around; */
/* 每一个元素之间间隙完全一样 */
/* align-content: space-evenly; */
}
li {
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码Aplicación de flexión: 1
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
复制代码 <style>
*{
padding: 0;margin: 0;
}
li{
/* width: 200px; */
height: 200px;
list-style: none;
background-color: skyblue;
}
ul {
/* 开启弹性布局 */
display: flex;
width: 1000px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
li:nth-child(2){
flex: 2;
background-color: teal;
}
li:nth-child(3){
flex: 3;
background-color: tomato;
}
</style>
复制代码Uso integral de dados flexibles
<div class="table">
<div class="touzi t1">
<span></span>
</div>
<div class="touzi t2">
<span></span>
<span></span>
</div>
<div class="touzi t3">
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t4">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
复制代码 <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.table {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 600px;
height: 600px;
margin: 100px auto;
background-color: teal;
}
.touzi {
display: flex;
width: 80px;
height: 80px;
background-color: whitesmoke;
border-radius: 15px;
padding: 10px;
}
.t1 span {
background-color: red;
}
.t1 {
justify-content: center;
align-items: center;
}
span {
display: block;
width: 18px;
height: 18px;
background-color: black;
border-radius: 50%;
}
.t2 {
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.t3 {
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.t3 span:nth-child(1) {
align-self: flex-start;
}
.t3 span:last-child {
align-self: flex-end;
}
.t4 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.t4 span {
margin: 5px;
}
.t5 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.t6 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
flex-direction: column;
}
.t5 span:nth-child(3) {
margin: 0 21px;
}
</style>
复制代码