当前位置:首页 » 《随便一记》 » 正文

flex布局之flex-direction

3 人参与  2023年03月29日 19:05  分类 : 《随便一记》  评论

点击全文阅读


一、flex布局的原理

    1,flex是”flexible Box”的缩写,意为”弹性布局”;

    2.当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将会失效。

言而简之:flex布局原理就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。

二、flex布局父项常见属性

flex-direction:设置主轴的方向justify-content:设置主轴上的子元素排列方式flex-wrap:设置子元素是否换行align-content:设置侧轴上的子元素的排列方式(多行)align-items:设置侧轴上的子元素的排列方式(单行)flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap

三、主轴和侧轴

    1.在flex布局中,是分为主轴和侧轴两个方向的

    默认主轴就是x轴方向,水平向右

    默认侧轴方向就是y轴方向,垂直向下

    2.属性值

    flex-direction属性决定主轴的方向(即项目的排列方向)

当然,主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴了。但是子元素是跟着主轴来进行排列的

属性

说明

row

默认值从左到右

row-reverse

从右到左

column

从上到下

column-reverse

从下到上

<!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, initial-scale=1.0">

    <title>初体验</title>

    <style>

        div {

            /*给父级添加flex,里面的行内元素就转换成了块级元素 */

            display: flex;

            width: 300px;

            height: 150px;

            background-color: skyblue;

            margin: 0 auto;

            /* 默认是沿着x轴排列的 */

            /* flex-direction: row; */

            /* 翻转,倒着排列 */

            /* flex-direction: row-reverse; */

            /* 设置y轴为主轴,x轴就成了侧轴 */

            /* flex-direction: column; */

            /* 沿y轴翻转 */

            flex-direction: column-reverse;

        }

       

        div span {

            width: 90px;

            height: 45px;

            background-color: plum;

            margin: 5px;

            /* flex: 1; */

        }

    </style>

</head>

<body>

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </div>

</body>

</html>

flex-direction:row;

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;


点击全文阅读


本文链接:http://zhangshiyu.com/post/57183.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 苏锦瑶魏昭今日阅读更新-(魏昭苏锦瑶)全文免费阅读-魏昭苏锦瑶
  • 苏锦瑶魏昭(魏昭苏锦瑶)全文免费阅读无弹窗大结局_(苏锦瑶魏昭)
  • 程星野杨北茉(杨北茉程星野)全文免费阅读无弹窗大结局_程星野杨北茉最新章节列表_笔趣阁(杨北茉程星野)
  • (程星野杨北茉)全文免费阅读无弹窗大结局_(杨北茉程星野阅读无弹窗)程星野杨北茉最新章节列表_笔趣阁(杨北茉程星野)
  • 盛景淮沈茉漓(沈茉漓盛景淮)全文免费阅读无弹窗大结局_盛景淮沈茉漓最新章节列表_笔趣阁(沈茉漓盛景淮)
  • 沈茉漓盛景淮(沈茉漓盛景淮)全文免费阅读无弹窗大结局_(沈茉漓盛景淮)沈茉漓盛景淮最新章节列表(沈茉漓盛景淮)
  • 玄昭温绰玉阅读无弹窗大结局_(温绰玉玄昭阅读无弹窗)最新章节列表_笔趣阁(温绰玉玄昭)
  • 温绰玉玄昭(玄昭温绰玉)全文免费阅读无弹窗大结局_温绰玉玄昭最新章节列表_笔趣阁(玄昭温绰玉)
  • 纪云禾陆景淮阅读无弹窗大结局_(陆景淮纪云禾阅读无弹窗)最新章节列表_笔趣阁(陆景淮纪云禾)
  • 陆景淮纪云禾阅读无弹窗大结局_(纪云禾陆景淮阅读无弹窗)最新章节列表_笔趣阁(纪云禾陆景淮)
  • 秦樾容裳最新章节(容裳秦樾)全文免费阅读无弹窗大结局_秦樾容裳全文免费阅读(容裳秦樾)
  • (容裳秦樾)全文免费阅读无弹窗大结局_(秦樾容裳阅读无弹窗)容裳秦樾最新章节列表_笔趣阁(秦樾容裳)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1