CSS telescopic box layout (summary sharing)

This article brings you relevant knowledge about css, which mainly introduces issues related to CSS telescopic box layout. An element sets the CSS attribute display:flex or display:inline-flex. , the element becomes a scalable container. Let’s take a look at it. I hope it will be helpful to everyone.

(Learning video sharing: css video tutorial, html video tutorial)

Telescopic Box layout

1 Flex container and flex items

Flexible container: An element sets CSS propertiesdisplay:flex or display:inline-flex, the element becomes a flex container.

Scaling project: The child elements of the scaling container are the scaling projects.

Features of scalable projects:

1. The scalable projects will be arranged horizontally in the scalable container by default.
2. The scalable project can set the width, height, inner and outer margins, and there will be no margin collapse. It will not break away from the document flow and is scalable.
3. An element can be a flex item and a flex container at the same time.

2 Set the spindle direction and line wrapping method

Spindle: Flexible items are arranged along the spindle, the default spindle direction It's from left to right.

Side axis: The axis perpendicular to the main axis is called the side axis, and the direction of the side axis changes with the direction of the main axis.

Set the main axis direction

Give the CSS property to the flex container flex-direction You can set the main axis direction, the value is as follows:

row				水平从左到右，默认值
row-reverse		水平从右到左
column			垂直从上到下
column-reverse	垂直从下到上

Set the line wrap method

Give the CSS property of the flex container flex-wrap You can set the line wrap method of the flex item in the main axis direction. The value of the property is as follows:

nowrap			默认值，不换行
wrap			自动换行
wrap-reverse	自动换行，行翻转

Set the main axis direction and line wrapping method at the same time

flex-flow is a composite property of flex-directrion and flex-wrap. You can set the main axis direction and line wrapping method at the same time. Line break mode.

flex-flow You can set 1 value or 2 values ​​(there is no order requirement between the two values).

3 Set the alignment of the flex items on the main axis

Set the justify-content attribute to the flex container to set the flex items on the main axis The alignment of No line breaks on top)

Set the align-items

flex-start			默认值，主轴起始对齐
flex-end			主轴结束对齐
center				居中
space-between		两端没有空隙，中间有空隙
space-around		两端空隙是中间空隙的一半
space-enenly		两端空隙与中间空隙相等

Copy after login

Multiple main axis lines (scaling The item wraps on the main axis)

Easily set the align-content

stretch			默认值，伸缩项目在侧轴方向的长度（高度）在侧轴方向拉伸（不设置在侧轴方向的长度，才会生效）
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中对齐
baseline		文本基线对齐

Copy after login

The align-items property will work regardless of one main axis line or multiple main axis lines; but align-content only works for multiple main axis lines.

1. 5 The scalability of the flex project

The base length of the flex project on the main axis flex-basis

flex-basis Specifies the length to set the length of the flex item on the main axis.

Expansion ratio flex-grow

When a scalable project is expanded, only the expansion ratio of the scalable project is considered.

Shrink ratio flex-shrink

When shrinking a telescopic item, you must consider both the shrinkage ratio and the original length of the shrinkable item on the main axis.

flex composite attribute

strecch			默认值
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中对齐
space-between	两端没有空隙，中间有空隙
space-around	两端空隙是中间空隙的一半
space-enenly	两端空隙与中间空隙相等

flex: grow shrink basis;flex: 0 1 auto;   /* 扩展比率是0，收缩比率是1，基准值是auto */

6 Telescopic items Sorting

flex: 1;      /* flex: 1 1 0; */flex: auto;   /* flex: 1 1 auto; */flex: none;   /* flex: 0 0 auto    不伸不缩*/flex: 0 auto; /* flex: 0 1 auto */

7 Set the alignment of the flex item on the side axis individually

align-self

8 Summary of CSS properties related to the flex box

Attributes set to the flex container

Attributes set to the scalable project

示例如下：

CSS3 弹性盒（Flexible Box 或 flexbox ），是一种当页面需要适应不同的屏幕大 小以及设备类型时确保元素拥有恰当的行为的布局方式。

        引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素 进行排列、对齐和分配空白空间。

        容器  使用弹性盒布局的父元素 display:flex;

本质：给父盒子添加flex属性，来控制子盒子的位置和排列方式。

       主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。

　　侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

Flex父容器属性

要改变元素的模式为伸缩容器，需要使用display属性。

display:flex | inline-flex

flex:设置为块级伸缩容器。

inline-flex:设置为内联级伸缩容器。

<!DOCTYPE html>
<html>
<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>
        *{
            margin:0;
            padding:0;
        }
        div>div{
            width:100px;
            height:100px;
            line-height:100px;
            border:1px solid;
            text-align:center;
            margin:10px;
        }
        #box{
            display:flex;     
            border:1px solid;
            margin:20px;
        }
        #inline{            
            display:inline-flex;
            border:1px solid;
            margin:20px;
        }
    </style>
    </head>
    <body>
    <div id="box">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div id="inline">
        <div>A</div><div>B</div><div>c</div><div>D</div>
    </div>
    </body>
    </html>

输出结果：

       块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。

　　Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。

（学习视频分享：css视频教程、html视频教程）

The above is the detailed content of CSS telescopic box layout (summary sharing). For more information, please follow other related articles on the PHP Chinese website!