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

attribute to the scalable container. The attribute values ​​are as follows:

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

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

Easily set the align-content

attribute for scaling. The attribute value is as follows:

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

Summary:

align-content actually sets how to align multiple main axes.

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.

If flex-basis is not set, the length of the flex item on the main axis depends on the set width or height.

Expansion ratio flex-grow

The specified number represents the expansion ratio. The default value of this property is 0.

The prerequisite for the expansion of the scalable project: The scalable container has sufficient length upward in the main axis direction.

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

Shrink ratio flex-shrink

The specified number represents the shrinkage ratio. The default value of this property is 1.

The prerequisite for the shrinkage of the scalable project: The length of the scalable container is insufficient in the main axis direction.

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

Set the expansion ratio, contraction ratio, and main axis reference length at the same time. The setting rules are as follows:

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

Use the order attribute to set the sorting of scalable items. The value is a number. The smaller the number, the higher the sorting is. It can be a negative value. The default value is 0.

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

Set properties for the flex item

align-self

You can set the flex item individually The alignment of items on the cross axis. The value of the attribute is consistent with align-items.

8 Summary of CSS properties related to the flex box

Attributes set to the flex container

##displaySet the scaling containerflex-directionSet the main axis directionflex-wrapSet the line wrapping methodflex-flowSet the main axis direction and line wrapping method at the same timeThe values ​​​​of flex-dierection and flex-wrapjustify-contentSet the alignment of flex items on the main axisalign-itemsSet the alignment of stretch items on the cross axis (applies to a main axis line) align-contentSet the alignment of flex items on the side axis (applicable to multiple main axis lines)

CSS Attribute name	Meaning	Value
		flex: Block-level scalable container. **inline-flex:** Inline flex container.
		row: Default value, horizontally from left to right. row-reverse: Horizontally from right to left. column: Vertically from top to bottom. **column-reverse：**Vertical from bottom to top
		nowrap : Default value, no line breaks. wrap: Automatically wrap lines. wrap-reverse: Automatically wrap and flip lines.
		flex-start: Alignment of the main axis starting point. flex-end: Alignment of main axis end point. center: Center alignment. space-between: There is no space at both ends and there is space in the middle. **space-around:**The spaces at both ends are half of the space in the middle. **space-evenly:** The spaces at both ends are consistent with the space in the middle.
		stretch: Default value, stretch on the cross axis. flex-start: Align the starting point of the cross axis. flex-end: Alignment of cross axis end point. center: Center alignment. baseline: Baseline alignment.
		stretch: Default value, stretch on the cross axis. flex-start: Align the starting point of the cross axis. flex-end: Alignment of cross axis end point. center: Center alignment. space-between: There is no space at both ends and there is space in the middle. **space-around:**The spaces at both ends are half of the space in the middle. **space-evenly:** The spaces at both ends are consistent with the space in the middle.

Attributes set to the scalable project

CSS property nameMeaningValueflex-growExpansion ratioNumber, the default value is 0 flex-shrinkShrink ratioNumber, the default value is 1flex-basis The reference length on the main axisSpecify the length, the default value is autoflexComposite attribute, and set grow shrink basisgrow shrink basisorderThe order of shrinking itemsNumber, the default value is 0align-selfSeparately set the alignment of flex items on the cross axis**auto: **Default value, according to the settings of the flex container.

示例如下：

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视频教程）

		stretch: Default value, stretches on the cross axis. flex-start: Align the starting point of the cross axis. flex-end: Alignment of cross axis end point. center: Center alignment. baseline: Baseline alignment.

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!