弹性布局--flex方向

MkkHou 发布于2019-04-23 11:48 / 2707人阅读

摘要：方向方向由特性决定用于定义弹性布局模式。从左向右主轴水平方向交叉轴垂直方向。从下往上反向注意弹性布局不存在高宽水平垂直等属性值。不会自己换行的，空间不够会自动伸缩。从左向右从上往下从右往左从下往上

flex方向

flex方向由flex-direction特性决定,用于定义弹性布局模式。flex-direction共有4种模式：从左向右、从右向左、从上往下、从下往上。

主轴

主轴的起点与终点定义了容器元素的开始和结束边缘。

交叉轴

交叉轴的起点与终点定义了容器的顶部与底部。

从左向右：flex-direction:row

主轴：水平方向；交叉轴：垂直方向。

从右向左：flex-direction: row-reverse（flex-direction:row的反向）

从上往下：flex-direction: column

主轴：垂直方向；交叉轴：水平方向。

从下往上： flex-direction: column-reverse（flex-direction: column反向）

注意：flexbox弹性布局不存在高、宽、水平、垂直等属性值。盒子模型的大小终于由浏览器计算得到。flexbox不会自己换行的，空间不够会自动伸缩。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }

        .flexbox-row{
            display: flex;
            flex-direction: row;
        }
        .box{
            width: 50px;
            height: 50px;
        }
        .flexbox-column{
            display: flex;
            flex-direction: column;
        }
        .flexbox-row-reverse{
            display: flex;
            flex-direction: row-reverse;
        }
        .flexbox-column-reverse{
            display: flex;
            flex-direction: column-reverse;
        }
    style>
head>
<body>

<div class="flexbox-row">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>


<div class="flexbox-column">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>
<div class="flexbox-row">div>

<div class="flexbox-row-reverse">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>


<div class="flexbox-column-reverse">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>
body>
html>

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1185.html

flex基础布局详解

摘要：系统性的介绍关于布局，也作为自学的一篇文章基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。属性一个布局的页面所具有的元素可分为类。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 flex-tutorials 系统性的介绍关于flex布局，也作为自学的一篇文章 flex基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充...

nemo 2019-08-30 15:53 评论0 收藏0
flex基础布局详解

摘要：系统性的介绍关于布局，也作为自学的一篇文章基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。属性一个布局的页面所具有的元素可分为类。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 flex-tutorials 系统性的介绍关于flex布局，也作为自学的一篇文章 flex基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充...

luodongseu 2019-08-01 16:29 评论0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。前言你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...

andycall 2019-08-30 13:13 评论0 收藏0
弹性布局示例

摘要：弹性布局背景模块目前为旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使其尺寸未知和或动态因此单词。主轴弹性容器的主轴是弹性项目布局的主要轴子项目默认按照主轴排列。判断哪个是起始点，主要看弹性布局的流动方向。原文章地址https://css-tricks.com/snippe...根据原文章翻译并添加自己的理解，有不对的欢迎指正。弹性布局-背景 Flexbox ...

qqlcbb 2019-08-29 15:08 评论0 收藏0
弹性布局示例

摘要：弹性布局背景模块目前为旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使其尺寸未知和或动态因此单词。主轴弹性容器的主轴是弹性项目布局的主要轴子项目默认按照主轴排列。判断哪个是起始点，主要看弹性布局的流动方向。原文章地址https://css-tricks.com/snippe...根据原文章翻译并添加自己的理解，有不对的欢迎指正。弹性布局-背景 Flexbox ...

piglei 2019-08-02 10:15 评论0 收藏0
页面布局 - flex弹性布局

摘要：伸缩项，例如给子容器添加一个所有子容器的默认都为，我们给第一个容器设置为时会产生类似于排序的效果伸缩容器 flex弹性布局 html： *{ margin: 0; padding: 0; ...

liaosilzu2007 2019-08-29 16:59 评论0 收藏0