移动端基础：flex布局

最新推荐文章于 2024-10-05 17:04:37 发布

象更

最新推荐文章于 2024-10-05 17:04:37 发布

阅读量963

点赞数 18

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_74227060/article/details/135844759

版权

flex布局原理

弹性布局，任何容器都可以指定flex布局

当父类设为flex布局之后子类的float、clear、vertical-align属性将失效

采用flex布局的元素，称为flex容器所有子元素称为容器成员，简称‘项目’。

可以横向排列也可以纵向排列

通过给父类添加flex属性，控制子盒子位置和排列方式

属性	作用
flex-direction	设置主轴方向
justify-content	设置主轴上子元素排列方式
flex-warp	设置子元素是否换行
align-content	设置侧轴上子元素排列方式（多行）
align-items	设置侧轴上子元素排列方式（单行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-warp

主轴和侧轴

即行和列；x轴水平向右，y轴竖直向下

flex-direction

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

、

justify-content

设置主轴上的子元素排列方式

注：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值从头部开始如果主轴是x轴则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间

默认flex-direction：row；

flex-wrap

设置子元素是否换行

默认情况下所有项目在同一轴线上，flex-wrap默认不换行，如果装不下，会把子盒子变小。

nowrap：默认值，不换行

wrap：换行

align-items

设置侧轴上子元素排列方式（单行）

align-content

设置侧轴上子元素排列方式（多行）

只能用于子项换行情况

单行找align-items 多行找align-content

flex-flow

复合写法：

flex-flow：row wrap；

flex属性

定义项目分配剩余空间，flex表示占多数份

flex：<number>;

圣杯布局：

flex等于1相当于权重在所有span里为1

align-self

控制子项自己在侧轴上的排列方式

可允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

格式：

span::nth-child(2) {

/*设置自己在侧轴的排列方式*/

align-self: flex-end;

}

order

与z-index不同，order是前后关系，z-index是叠罗汉效果

数值越小越靠前

背景渐变 linear-gradient

background: linear-gradient(起始方向，颜色1，颜色2...);

如：

background: -webkit-linear-gradient(left，red，blue);

携程案例：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
   <title>~</title>
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <link rel="shortcut icon" href="">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

< /style>
</head>

<body>
   <div class="header">
      <div class="search">&nbsp; 搜索：目的地/酒店/景点/航班号</div>
      <a href=""><img src="https://pic.c-ctrip.com/platform/h5/home/promotion-app-log.png" alt="">我的</a>
   </div>
   <a class="abc"><img src="https://dimg04.c-ctrip.com/images/0zg0p12000cz4eu861DA5.jpg" alt=""></a>
   <ul class="nav">
      <li><a href="#"><span class="ico"></span><span>1</span></a></li>
      <li><a href="#"><span class="ico"></span><span>2</span></a></li>
      <li><a href="#"><span class="ico"></span><span>3</span></a></li>
      <li><a href="#"><span class="ico"></span><span>4</span></a></li>
      <li><a href="#"><span class="ico"></span><span>5</span></a></li>
   </ul>
   <nav>
      <div class="common">
         <div class="items"><a href=""><span><img
                     src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/hotel.fc17d0f7726132bf2459621923704f0f.png"
                     alt=""></span><span class="text">酒店</span></a>
                  </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/flight.2af1e1835a10709db9ad91702e30de35.png"
               alt=""></span><span class="text">机票</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/train_ticket.62fc76e6f4ffac3d2e4610c807f535bb.png"
               alt=""></span><span class="text">火车票</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/vacation.50ea6db60ea69086791ea507b62364bb.png"
               alt=""></span><span class="text">旅游</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/gs.24c525633ba91ad0a2c41ff96773262b.png"
               alt=""></span><span class="text">攻略/景点</span></a>
         </div>
      </div>
      <div class="common">
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/hotel_inn.cbccfdc8449dea7bf83171dfa7ea6f81.png"
               alt=""></span><span class="text">民宿/客栈</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/flight_package.7485a98b650ea13917e3cdd36f3eda67.png"
               alt=""></span><span class="text">机+酒</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/bus_ticket.19d2e8eb864288544912b3c1005c9a8e.png"
               alt=""></span><span class="text">汽车/船票</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/ticket.e872065047ec929016de33d36e578e49.png"
               alt=""></span><span class="text">门票/活动</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/shop.dba5be1f7b683690ea1d53bdd9ecef8f.png"
               alt=""></span><span class="text">购物/免税</span></a>
         </div>
      </div>
      <div class="common">
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/food_v2.759e14ab287956e9925f669ec1ef2169.png"
               alt=""></span><span class="text">美食</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/airport_transfer.fb8d923aefb7393a3485ebcde0888932.png"
               alt=""></span><span class="text">接送机/包车</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/car.d343444e248183e0c2ce61894012a327.png"
               alt=""></span><span class="text">租车</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/weekend.b327d041f73dd403971831a874eb25e9.png"
               alt=""></span><span class="text">周边游</span></a>
         </div>
         <div class="items">
            <a href=""><span><img
               src="https://ws-s.tripcdn.cn/modules/basebiz/h5home/finance.5cd5a7a955c6e5c633e6ae4e2b6cd551.png"
               alt=""></span><span class="text">借钱/分期</span></a>
         </div>
      </div>

   </nav>
</body>

</html>

body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    background: #f2f2f2;
    overflow-x: hidden;
 }

 .header {
    display: flex;
    max-width: 540px;
    min-width: 320px;
    position: fixed;
    width: 100%;
    background-color: white;
    border-bottom: #4b4a4a;
    top: 0;
 }

 .search {
    font-family: 'icomoon';
    margin: 11px 10px;
    flex: 1;
    height: 25px;
    border: 2px solid #4b4a4a;
    border-radius: 5px;
    line-height: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
 }

 .header a {
    height: 44px;
    width: 35px;
    color: blue;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
 }

 .header img {
    margin-top: 5px;
    height: 25px;

 }

 .nav {

    height: 64px;
    background-color: #fff;
    margin: 3px 4px;
    border-radius: 8px;
    display: flex;
 }

 .abc {
    display: block;
    margin-top: 47px;
 }

 .abc img {
    width: 100%;
 }

 .nav li {
    flex: 1;
 }

 .nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
 }

 .nav .ico {
    width: 32px;
    height: 32px;
    background-color: aqua;
 }

 nav {
    border-radius: 8px;
    margin: 0 4px 3px;
    overflow: hidden;
 }

 nav .common {
    height: 58px;
    background-color: antiquewhite;
    display: flex;
 }

 nav .common:nth-child(2) {
    margin: 3px 0;
 }

 .items {
    flex: 1;
 }

 .items:nth-child(-n+4) {
    border-right: 1px solid #fff;
 }

 nav .common:nth-child(1) {
    background: -webkit-linear-gradient(left, rgb(237, 123, 16), rgb(241, 184, 59));
 }

 nav .common:nth-child(2) {
    background: -webkit-linear-gradient(left, rgb(42, 242, 212), rgb(14, 234, 132));
 }

 nav .common:nth-child(3) {
    background: -webkit-linear-gradient(left, rgb(70, 70, 250), rgb(10, 10, 239));
 }


 .items a {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
 }

 .items .text {
    color: #fff;
    font-weight: 14px;
 }

 .items img {
    width: 28px;
    height: 28px;
 }

效果：