zoukankan      html  css  js  c++  java
  • 移动 WEB 开发布局方式 ---- flex 布局

    一、flex布局体验

    1.1 传统布局 flex 布局

    在这里插入图片描述

    1. 2 初体验

    在这里插入图片描述

    1. 搭建 HTML 结构

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    

    2. 添加样式

    <style>
        div {
             80%;
            height: 300px;
            background-color: pink;
            display: flex;
            justify-content: space-around;
    
        }
        div span {
             150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
    </style>
    

    在这里插入图片描述
    在 div中 添加 display: flex; justify-content: space-around;

    在这里插入图片描述
    并且是自适应的效果
    在这里插入图片描述

    在 span 中添加 flex:1;,可以实现三等分
    在这里插入图片描述

    二、 flex 布局原理

    2.1 布局原理

    在这里插入图片描述

    注意:不管是块级元素,还是行内元素,都可以使用 flex 布局

    在这里插入图片描述

    三、flex布局父项常见属性

    3.1 常见父项属性

    在这里插入图片描述

    3.2 flex-direction 设置主轴的方向

    1.主轴与侧轴

    在这里插入图片描述

    2. 属性值

    在这里插入图片描述
    栗子:

    <style>
        div {
             80%;
            height: 300px;
            background-color: pink;
            /*给父级添加 flex 属性*/
            display: flex;    
        }
        div span {
             150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
    </style>
    <body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    </body>
    

    在这里插入图片描述

    默认就是 默认的主轴就是 x 轴 行 row flex-direction:row;
    那么 y 轴就是 侧轴
    我们的元素是跟着主轴来排列的

    x 轴翻转: flex-direction: row-reverse;

    在这里插入图片描述
    我们可以把主轴弄成 y 轴,那么 x 轴就成为了 侧轴

    flex-direction: column;

    在这里插入图片描述

    flex-direction: column-reverse;
    在这里插入图片描述

    3.3 justify-content 设置主轴上的排列方式

    注意:只跟主轴来走,跟侧轴没有关系

    在这里插入图片描述
    栗子:

    <style>
     div {
             60%;
            height: 300px;
            background-color: pink;
            display: flex;
            /*justify-content:是设置主轴上元素的排列方式*/
            /*默认从左到右排列*/
            /*justify-content: flex-start;*/
        }
        div span {
             150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            margin-bottom: 5px;
        }
    </style>
    <body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    </body>
    

    在这里插入图片描述

    1. 让子元素从尾部(从右到左或者从下往上)排列
      justify-content: flex-end;
      在这里插入图片描述

    2. 让我们的子元素居中对齐
      justify-content: center;
      在这里插入图片描述

    3. 平方剩余空间
      justify-content: space-around;

    每个子元素的 margin-left 和 margin-right 都是相等的

    在这里插入图片描述

    1. 先两边贴边,再分配剩余的空间
      justify-content: space-between;

    在这里插入图片描述
    5. 设置主轴为 Y 轴并且沿 Y 轴 垂直居中
    flex-direction: column;
    justify-content: center;
    在这里插入图片描述

    3.4 flex-wrap 设置子元素是否换行

    在这里插入图片描述

    栗子:

    <style>
        div {
             500px;
            height: 300px;
            background-color: pink;
            display: flex;
        }
        div span {
             150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            margin-bottom: 5px;
        }
    </style>
    

    在这里插入图片描述

    注意: 在 flex 布局中,默认子元素是不换行的,如果子元素添加的话,父元素装不下子元素,会缩小子元素的宽度,放到父元素里面
    默认是 flex-wrap : nowrap

    在这里插入图片描述
    让子元素换行显示: flex-wrap: wrap;

    在这里插入图片描述

    3.5 align-items设置侧轴上的子元素排列方式(单行)

    在这里插入图片描述
    栗子:

    1. 实现水平居中和垂直居中(前提是主轴是默认的 x 轴)
    <style>
        div {
             800px;
            height: 300px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div span {
             150px;
            height: 100px;
            background-color: purple;
            margin: 10px;
        }
    </style>
    

    在这里插入图片描述

    1. align-items: flex-start;
      在这里插入图片描述

    2. align-items: flex-end;
      在这里插入图片描述

    3. 如果设置主轴是 y 轴的话
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      在这里插入图片描述

    4. 拉伸,但是子元素不给高度,不然是没有效果的
      align-items: stretch;
      在这里插入图片描述

    3.6 align-content 设置侧轴上的子元素的排列方式(多行)

    在这里插入图片描述
    栗子:

    1. 设置 align-content: flex-start;
    div {
             600px;
            height: 300px;
            background-color: pink;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }
    

    在这里插入图片描述

    1. 设置 align-content:center
      在这里插入图片描述

    2. 设置 align-content: space-between;
      在这里插入图片描述

    3. 设置 align-content: space-around;
      在这里插入图片描述

    3. 6 align-itemsalign-content 的区别

    在这里插入图片描述

    3.7 flex-flow

    在这里插入图片描述
    栗子:

    flex- flow: column wrap
    就相当于同时设置了
    flex-wrap: wrap;flex-direction: column;

    在这里插入图片描述

    四、flex 布局子项常见属性

    在这里插入图片描述

    4.1 flex 属性

    在这里插入图片描述

    栗子:

    <style>
        section {
            display: flex;
             80%;
            height: 150px;
            /*background-color: green;*/
        }
        section div:nth-child(1){
             100px;
            height: 150px;
            background-color: pink;
        }
        section div:nth-child(2){
            flex: 1;
            background-color: purple;
        }
        section div:nth-child(3){
             100px;
            height: 150px;
            background-color: orange;
        }
    </style>
    <body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    </body>
    

    在这里插入图片描述
    左右两侧是固定的,中间是自适应的
    在这里插入图片描述

    栗子2:

     p {
             80%;
            height: 150px;
            margin: 50px auto;
            background-color: pink;
            display: flex;
        }
        p span{
            flex: 1;
        }
    
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
    

    在这里插入图片描述

    注意:不给子项宽度,默认剩余宽度就是父盒子的宽度

    栗子3:

        p span{
            flex: 1;
        }
        p span:nth-child(2){
            background-color: purple;
            flex: 2;
        }
    

    在这里插入图片描述
    并且三个span都可以进行自适应
    在这里插入图片描述

    4.2 align-self 控制子项自己在侧轴上的排列方式

    在这里插入图片描述

    栗子:

    <style>
        div {
             60%;
            height: 300px;
            background-color: pink;
            display: flex;
        }
        div span{
             150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
    </style>
    <body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    

    在这里插入图片描述
    我们想要 第三个盒子在下面底侧

    div span:nth-child(3){
         align-items: flex-end
    }
    

    在这里插入图片描述

    4.3 order 属性定义项目的排列顺序

    在这里插入图片描述
    栗子:

     div span:nth-child(2){
            order: -1;
        }
    

    在这里插入图片描述

    第2个盒子与第1个盒子交换了,order默认是0,这里设置了-1 ,所以第2个盒子跑到了第1个盒子的前面

    五、携程网首页制作

    https://blog.csdn.net/qq_45103612/article/details/111146551

  • 相关阅读:
    【RL-TCPnet网络教程】第3章 初学RL-TCPnet的准备工作及其快速上手
    【二代示波器教程】第15章 FreeRTOS操作系统版本二代示波器实现
    【RL-TCPnet网络教程】第2章 嵌入式网络协议栈基础知识
    【二代示波器教程】第14章 uCOS-III操作系统版本二代示波器实现
    【RL-TCPnet网络教程】第1章 当前主流的小型嵌入式网络协议栈
    徐州网络赛H-Ryuji doesn't want to study【线段树】
    徐州网络赛F-Feature Trace【暴力】
    徐州网络赛C-Cacti Lottery【DFS】
    南京网络赛I-Skr【回文树模板】
    AC自动机
  • 原文地址:https://www.cnblogs.com/Chinatsu/p/14130739.html
Copyright © 2011-2022 走看看