Flex布局基础语法

最新推荐文章于 2024-01-30 19:11:06 发布

摆者食橙

最新推荐文章于 2024-01-30 19:11:06 发布

阅读量149

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_53992616/article/details/126961231

版权

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

跟着菜鸟教程一步一步走了一下，在博客里找了一些关于flex的题目复习一下，回顾后基本就能掌握下来。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

<!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>Document</title>
    <style>
        #box{
            height: 1200px;
            width: 100%;
            background-color: yellowgreen;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            align-items: center;
            align-content:stretch;
        }
        .inner{
            height: 300px;
            width: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 

        容器flex container属性:        
            flex-direction:方向 - row row-reverse column column-reverse
            flex-wrap:换行 - wrap wrap-reverse nowrap
            flex-flow:<flex-direction> <flex-wrap>:是方向换行的简写
            justify-content:主轴上的对齐方式 
                flex-start:起点对齐
                flex-end:终点对齐
                center:居中
                space-between:两端对齐，项目之间的间隔相等
                space-around:每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍
            align-item:交叉轴上的对齐方式
                flex-start:起点对齐
                flex-end:终点对齐
                center:交叉轴的终点对齐
                baseline:项目的第一行文字的基线对齐
                stretch(默认值):如果项目未设置高度或设为auto，将沾满整个容器的高度
            align-content:多轴对齐方式
                flex-start:与交叉轴的起点对齐
                flex-end:与交叉轴的终点对齐
                center:与交叉轴的终点对齐
                space-between:与交叉轴两端对齐，周线之间的间隔平均分布
                space-around:每根轴线间隔相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
                stretch:轴线占满整个交叉轴

        项目flex item属性
            order:定义项目的排列顺序，数值越小，排列越靠前，默认为0
            flex-grow:定义项目的放大比例,默认为0，即如果存在剩余空间，也不放大
            flex-shirink:定义项目的缩小比例，默认为1，积空间不足也不缩小
            flex-basis:定义分配多余空间之前，项目占据的主轴空间
            flex:<flex-grow>, <flex-shrink> 和 <flex-basis>
            align-self:允许单个项目由于其他项目不一样的对齐方式，可以福嘎align-item属性，默认为auto，表示继承父元素的align-items属性
                如果没有父元素则等同于stretch

     -->
    <div id="box">
        <div class="inner" style="order: 11;">1</div>
        <div class="inner" style="order: 1111;align-self: flex-end;">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        <div class="inner">7</div>
        <div class="inner">8</div>
        <div class="inner">9</div>
        <div class="inner">10</div>
        <div class="inner">11</div>
        <div class="inner">12</div>
        <div class="inner">13</div>
        <div class="inner">14</div>
        <div class="inner">15</div>
        <div class="inner">16</div>
        <div class="inner">17</div>
        <div class="inner">18</div>
    </div>
</body>
</html>

发布这个只是为了方便自己在后面需要回顾时，可以在自己的博客找到这些自己从头到尾记录的内容