前端Html5 （25）

最新推荐文章于 2024-07-10 14:03:37 发布

面白い魂

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量309

点赞数

文章标签：前端 html5 vue.js

本文链接：https://blog.csdn.net/weixin_64909133/article/details/122547446

版权

1.超赞的flex

<style>

nav{

width: 1200px;

height: 100px;

background: pink;

margin:0 auto;

/* 设置弹性盒 */

display: flex;

text-align: center;

line-height: 100px;

}

section{

/* 项目的属性 flex:1;均分父元素宽度 */

flex: 1;

border-right: 1px solid #000;

background: springgreen;

}

</style>

</head>

<body>

<nav>

<section>VIP服务</section>

<section>还有五个字</section>

<section>当然啦六个字</section>

</nav>

</body>

2.弹性盒容器的属性

<style>

.big{

width: 1000px;

height: 800px;

background: springgreen;

margin:0 auto;

/* 1、设置弹性盒 */

display: flex;

/* 2、更改主轴的方向 */

/* flex-direction: row; 默认值可以理解为X轴 */

/* flex-direction: row-reverse; 主轴为水平反向 */

/* flex-direction: column; 将主轴方向设置为纵向 */

/* flex-direction: column-reverse; 将主轴方向设置为纵向反向 */

/* 3、项目是否折行 */

/* flex-wrap: nowrap;默认情况下项目多的时候我是不折行的 */

/* flex-wrap: wrap;折行 */

/* flex-wrap: wrap-reverse; 反向折行 */

/* 4、了解复合属性主轴的方向与项目是否折行的简写 */

/* flex-flow: column wrap; */

/* 5、项目在主轴上的分布注意设置给容器是容器的属性 */

/* justify-content: flex-start; 默认值主轴的开端 */

/* justify-content: center; 让项目整体居中于主轴 */

/* justify-content: flex-end; 让项目整体居于主轴末端 */

/* justify-content: space-around; 项目在主轴上两端环绕对齐 */

/* justify-content: space-between; 项目在主轴上两端顶格对齐 */

/* justify-content: space-evenly;项目在主轴上两端等距对齐 */

/* 6、项目在垂直交叉轴的分布情况注意设置给容器是容器的属性 */

/* 假设你现在没有给项目(子元素)设置高度 */

/* align-items: stretch;默认值项目没有设置高度高度和容器一致 */

/* align-items: flex-start; 项目们居于垂直交叉轴上方 */

/* align-items: center; 项目们居中于垂直交叉轴 */

/* align-items: flex-end; 项目们居于垂直交叉轴末端 */

/* align-items: baseline; */

/* 7、多行项目在垂直交叉轴的排列方式那你注意首先项目要多其次需要设置折行 */

flex-wrap: wrap;

/* align-content: stretch;默认值项目没有设置高度会均分容器高度 */

/* align-content: flex-start; 项目们都在垂直交叉轴上方 */

/* align-content: center;项目们都在垂直交叉轴中间 */

/* align-content: flex-end;项目都在垂直交叉轴末端 */

/* align-content: space-around;项目们在垂直交叉轴两端环绕 */

/* align-content: space-between;项目们在垂直交叉轴两端顶格对齐 */

/* align-content: space-evenly;等距对齐 */

}

section{

width: 100px;

height: 100px;

border:1px solid #000;

/* 我希望他依旧是100*100的 */

box-sizing: border-box;

background: cyan;

}

</style>

</head>

<body>

</div>

</body>

</html>

<!-- <div id="box">

</div>

容器：你给谁设置了display:flex;那么谁就是容器一般可以视为父元素(假设说你给#box设置了那么#box就是.small的容器)

项目：容器里面的子元素称为“项目” （.small就是#box的项目）当然了项目也可以设置display:flex;（.small也可以设置display:flex;那么.little就是.small的项目)

主轴：是项目排列的方向，默认可以理解为是X轴但是你可以更改主轴的方向

垂直交叉轴：就是和主轴成90度的轴默认是Y轴当然如果你将主轴更改了假设将主轴更改为Y轴那么此时垂直交叉轴就是X轴 -->

3.弹性盒项目的属性

<style>

.big{

width: 1000px;

height: 500px;

background: red;

margin:0 auto;

/* 设置弹性盒 */

display: flex;

}

span{

width: 100px;

height: 100px;

border:1px solid #000;

background:springgreen ;

}

span:nth-of-type(2){

/* 1、项目的排列顺序 order:auto;默认值值越大越在后面可以为负值 */

order: -1;

background: cyan;

/* 项目在垂直交叉轴的排列方向 */

/* align-self: stretch;默认值不设置高度高度和容器一致 */

/* align-self: flex-start;居于垂直交叉轴上方 */

/* align-self: center;居于垂直交叉轴中间 */

/* align-self: flex-end;居于垂直交叉轴末端 */

}

</style>

</head>

<body>

</div>

</body>

4.多列布局

<style>

margin: 0;

padding: 0;

}

main{

width: calc(100% - 200px);

height: auto;

background: linear-gradient(to right,#3ce,#fb6);

margin:0 auto;

/* 你想要几列 */

column-count: 5;

-webkit-column-count: 5;

-moz-column-count: 5;

-ms-column-count: 5;

-o-column-count: 5;

/* 列间距 */

column-gap: 20px;

/* 列分割线 */

column-rule: 2px dotted #0f0;

/* 列高自适应 */

column-fill:auto;

/* 注意要么设置列数就是有几列要么就设置列宽不可以两个一起使用 */

/* column-width: 600px; */

}

figure{

border:1px solid #000;

background: #FFF;

/* 注意一定是给每一列小块设置 */

break-inside: avoid;

}

img{

/* 设置大小只设置宽度高度会等比例适应 */

width: 100%;

/* 就代表宽度和figure一致 */

}

h1{

column-span: all;

}

</style>

</head>

<body>

<main>

<h1>好好学习，不然就会像某某某同学一样，月薪只能刚刚过万</h1>