弹性布局

番茄西红柿发布于2019-04-23 11:48 / 3012人阅读

摘要：对齐对齐方式与主轴和交叉轴所在的方向有关而是控制方向的。主轴对齐方式共有种对齐方式主轴起点边缘开始，从左向右。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

flex对齐

flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。

主轴 justify-content

justify-content对齐方式共有5种对齐方式：

flex-start ：主轴起点边缘开始，从左向右。

flex-end ：主轴终点边缘开始，从右向左。

center ：主轴中间开始，向两端伸缩。

space-between：主轴两端对齐。

space-around ：与space-between区别就是起始端与结束端间隔相等。

交叉轴： align-content

align-content对齐方式共有6种。除了与justify-content前5种方式一样外，多了一种stretch对齐方式。

stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于flex-start。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

align-items

用于单行/单列对齐，沿主轴方向对齐。

flex-start ：主轴起点。

flex-end ：主轴终点。

center：主轴中间。

stretch ：拉伸。

baseline：基线对齐。

自身对齐方式：align-self

用于单行（或单列），沿交叉轴方向对齐。

flex-start ：交叉轴起点。

flex-end ：交叉轴终点。

center：交叉轴中间。

stretch ：拉伸。

baseline：基线对齐。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .box{
            width: 50px;
            height: 50px;
        }
        .flexbox-row{
            margin: 50px auto;
            display: flex;
            flex-direction: row;
            width: 120px;
            height: 320px;
            border: 1px #ccc solid;
            flex-wrap: wrap;
            /**
                左上角
                justify-content: flex-start;
                align-content: flex-start;

                左下角
                justify-content: flex-start;
                align-content: flex-end;

                右上角
                justify-content: flex-end;
                align-content: flex-start;
             */
            justify-content: flex-end;
            align-content: flex-end;
        }
    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;align-self: flex-start;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>
<script>

script>
body>
html>

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

转载请注明本文地址：https://www.ucloud.cn/yun/1181.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
说说弹性布局

摘要：占满交叉轴上所有的空间使用容器定义的的值以上就是我对弹性布局的一些知识点总结，如有异议，烦请告知，谢谢不努力就淘汰弹性布局弹性布局，是一种布局方式主要解决某个元素中子元素的布局方式它为布局提供了强大的灵活性概念和语法基本设置 display: flex; // 将块级元素设置为容器 display: inline-flex // 将行内元素设置为容器这里出现了容器...

learn_shifeng 2019-08-30 11:07 评论0 收藏0
弹性盒布局

一、弹性布局弹性布局，又称Flex布局 1、弹性布局的使用给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流； display:flex; 容器添加弹性布局后，显示为块级元素； display:inline-fle...

whatsns 2019-08-29 16:13 评论0 收藏0
弹性盒布局

一、弹性布局弹性布局，又称Flex布局 1、弹性布局的使用给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流； display:flex; 容器添加弹性布局后，显示为块级元素； display:inline-fle...

leanxi 2019-08-02 11:05 评论0 收藏0