弹性盒

最新推荐文章于 2023-09-05 18:01:56 发布

katsukichan

最新推荐文章于 2023-09-05 18:01:56 发布

阅读量174

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/nep_chan/article/details/81225874

版权

Css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

设置在容器上（父元素上）

(1)display:flex; 父元素设置成弹性盒。
规定子项目在父元素主轴方向一行显示，不会换行。侧轴方向会默认拉伸。

(2)设置主轴方向 flex-direction
属性值: row 默认为水平向右
column 垂直向下
row-reverse 水平向左
column-reverse垂直向上

(3)flex-wrap 伸缩换行
属性值：nowrap默认不换行
wrap换行

(4)flex-flow:flex-direction||flex-wrap; 伸缩流主轴方向及换行

(5)设置子项目在容器主轴方向的对齐方式
justify-content 属性值：
flex-start 默认在主轴方向起点位置对齐
flex-end 在主轴方向终点位置对齐
center 中间
space-between 将空白区域平分在子项目之间
space-around 将空白区域环绕在子项目两边

(6)设置子项目在其所在行的侧轴对齐方式 align-items（单行）
属性值： stretch 默认拉伸
flex-start 子项目在其所在行的起始位置摆放
flex-end 子项目在其所在行的结束位置摆放
center 中间
baseline 子项目在其所在行以基线对齐

设置在子项目上

(1) flex:number; 设置子项目在父元素主轴方向的比份
(2) 设置单个子项目在其所在行的侧轴对齐方式align-self（元素自己）
值参考align-self的属性值

案例

index.css
html,body{width: 100%;height: 100%;}
.box{
	height: 100%;
	display: flex;
	flex-direction: column;
}
.header{
	height: 88px;
	background: pink;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header a{
	display: block;
	width: 141px;
	height: 58px;
	color: #fff;
	background: #ccc;
	line-height: 58px;
	text-align: center;
}
.header a:nth-child(1){
	border-radius: 24px 0 0 24px;
}
.header a:nth-child(2){
	border-radius: 0 24px 24px 0;
}
.nav{
	height: 70px;
	background: #58bc58;
}
.main{
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto; 
}
.main ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
}
.main ul li{
	width: 48%;
	height: 380px;
}
.main ul li img{
	width: 100%;
	height: 80%;
}
.main ul li a span{
	font-size: 24px;
	color: #000;
}

.footer{
	height: 80px;
	background: #789;
}

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp"/>
  <link rel="stylesheet" type="text/css" href="css/base.css">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>oui-app</title>
  <script type="text/javascript">
    // 把尺寸放大N倍（N是window.devicePixelRatio）
    var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
    //物理像素*设备像素比=真实像素
    document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
    // 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）
    var scale = 1/window.devicePixelRatio;
    var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
    document.getElementById("vp").content = mstr;
  </script>
</head>
<body>
  <div class="box">
    <header class="header">
      <a href="javascript:;">Kasami</a><a href="javascript:;">Katsuki</a>
    </header>
    <nav class="nav"></nav>
    <main class="main">
      <ul>
      	<li>
      		<a href="javascript:;">
      			<img src="img/katsuki.jpg">
      			<span>katsuki desu</span>
      		</a>
      	</li>
      	<li>
      		<a href="javascript:;">
      			<img src="img/katsuki.jpg">
      			<span>katsuki desu</span>
      		</a>
      	</li>
      </ul>
    </main>
    <footer class="footer"></footer>
  </div>
</body>
</html>