CSS Flex布局示例
- flex布局基本知识参考：CSS 布局专题2--flex布局 [转]_baidu_41388533的博客-CSDN博客
主轴与交叉轴
Flex容器与Flex子项
示例
.main{
height:200px;
background: skyblue;
display: flex;
align-items: center;
}
.main div{
width:50px;
height:100px;
background:pink;
margin-right:10px;
}
.main div:nth-of-type(3){
margin-right: auto;
}
.main div:nth-of-type(6){
margin-right: auto;
}
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
.main {
height: 100vh;
background: skyblue;
display: flex;
}
.col1 {
width: 200px;
background: pink;
}
.col2 {
flex-grow: 1;
background: springgreen;
}
.col3 {
width: 100px;
background: tomato;
}
<div class="main">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
.main {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main .header {
height: 100px;
background: pink;
}
.main .content {
flex-grow: 1;
}
.main .footer {
height: 100px;
background: skyblue;
}
<div class="main">
<div class="header"></div>
<div class="content">
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div class="footer"></div>
</div>
body {
margin: 0;
}
.main {
height: 100px;
background: skyblue;
display: flex;
align-items: center;
}
.main div {
width: 100px;
height: 80px;
background: pink;
margin-right: 10px;
flex-shrink: 0;
}
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<style>
.swiper-container{
position: relative;
}
.swiper-wrapper{
display: flex;
}
.swiper-slide{
width:100%;
flex-shrink: 0;
}
.swiper-slide img{
width:100%;
}
.swiper-pagination{
position: absolute;
height: 28px;
width: 100%;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-pagination-bullet{
width:8px;
height:8px;
border-radius: 50%;
background:#c6bcaf;
margin:0 4px;
}
.swiper-pagination-bullet-active{
background:white;
}
.swiper-button-prev, .swiper-button-next{
position: absolute;
top:0;
height:100%;
display: flex;
align-items: center;
}
.swiper-button-prev{
left:0;
}
.swiper-button-next{
right:0;
}
.swiper-button-prev i, .swiper-button-next i{
font-size:44px;
color:white;
}
</style>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://pic3.iqiyipic.com/common/lego/20210609/e66f0e28608f4aa7b08b5d93088c73c6.jpg?caplist=jpg,webp" alt=""></div>
<div class="swiper-slide"><img src="https://pic0.iqiyipic.com/common/lego/20210614/71f0084bddcb446db323fa9eebf53585.jpg?caplist=jpg,webp" alt=""></div>
<div class="swiper-slide"><img src="https://m.iqiyipic.com/common/lego/20210613/80bfb766ac36470f9ec3a3788f85eabe.jpg?caplist=jpg,webp" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev">
<i class="iconfont icon-swiperhoutui"></i>
</div>
<div class="swiper-button-next">
<i class="iconfont icon-swiperqianjin"></i>
</div>
</div>
</body>
知乎栏案例
<style>
body{
background:#f6f6f6;
}
.header-container{
background:#ffffff;
}
.header-wrapper{
margin:0 auto;
height: 52px;
min-width:1000px;
max-width:1156px;
display: flex;
align-items: center;
}
.header-logo{
margin-right: 40px;
}
.header-nav{
display: flex;
}
.header-nav li{
margin-right:30px;
}
.header-search{
flex-grow:1;
display: flex;
justify-content: center;
}
.header-search-wrapper{
max-width:482px;
height:34px;
flex-grow: 1;
display: flex;
align-items:center;
justify-content: space-between;
background:#f6f6f6;
border-radius: 100px;
}
.header-search-input{
border:none;
background:none;
margin:0 20px;
}
.header-search-wrapper i{
margin:0 20px;
}
.header-btn{
display: flex;
}
.header-btn-login{
width:60px;
height:32px;
border:1px #0066ff solid;
border-radius: 3px;
color:#0066ff;
background:none;
cursor: pointer;
display: block;
margin-left:20px;
}
.header-btn-zhihu{
width:90px;
height:32px;
background:#0066ff;
color:white;
border:none;
border-radius: 3px;
display: block;
margin-left:20px;
cursor: pointer;
}
</style>
<div class="header-container">
<div class="header-wrapper">
<div class="header-logo">
<a href="#"><img src="./logo.png" alt=""></a>
</div>
<ul class="header-nav">
<li>首页</li>
<li>会员</li>
<li>发现</li>
<li>等你来答</li>
</ul>
<div class="header-search">
<div class="header-search-wrapper">
<input class="header-search-input" type="text" placeholder="520文案">
<i class="iconfont icon-fangdajing"></i>
</div>
</div>
<div class="header-btn">
<button class="header-btn-login">登录</button>
<button class="header-btn-zhihu">加入知乎</button>
</div>
</div>
</div>
