话说前端13-css的flex布局 css fixed布局

分享兴趣，传播快乐，增长见闻，留下美好！

亲爱的您，这里是LearningYard学苑。

今天小编为大家带来

话说前端-13-css的flex布局

欢迎您的访问。

Share interests, spread happiness, increase knowledge, and leave a good legacy!

Dear you, this is The LearningYard Academy.

Today Xiaobian brings it to you

Welcome to your visit.

今天我们讲一讲css中比较重要的布局之一，flex布局。

通常我们给flex布局是给父元素的，通过display：flex进行设置。通常要给父元素明确的宽高。

Today, let's talk about one of the more important layouts in css, flex layout.

Usually, the layout we give to flex is for the parent element, which is set by display：flex. Usually, the parent element should be given a clear width and height.

flex布局还有一些其他的属性，也是给父元素的，通过把其存在的空白空间各种分配来达到一种布局的目的。首先伸展，即给子元素设置宽高后，剩余的空间直接通过比例来分配空间。属性为flex-grow：默认为0，如：0 1 2,就是按0：1：2分配剩余空间。同理还有flex-shrink。

The layout of flex has some other attributes, which are also given to the parent elements, and the purpose of a layout is achieved by allocating all kinds of empty spaces in it. First, after stretching, that is, setting the width and height of sub-elements, the remaining space is allocated directly by proportion. The attribute flex-grow: defaults to 0, such as 0 1 2, which means that the remaining space is allocated according to 0: 1: 2. Similarly, there is flex-shrink.

还有flex-decotion：设置主轴的排列方式，如row，从左向右，以及row-revese，就是反向，还有column，从上到下，以及column的反向column-reserve。

There is also flex-decotion: set the arrangement of spindles, such as row, from left to right, and row-revese, which is reverse, and column, from top to bottom, and the reverse column-reserve of Column.

还有justify-content：分配剩余的空间

flex-star-----元素沿着主轴起点排列(默认值)

flex-end-----元素沿着终点排列

center-------元素剧中排列

space-around----空白分布到元素两侧

space-between---空白均匀分布到元素之间

space-evenly----空白分布到元素的单侧。

And justify-content: allocate the remaining space.

Flex-star-elements are arranged along the starting point of the main axis (default value)

Flex-end-elements are arranged along the end point.

Center------- element arrangement in the play

Space-around---- white space is distributed on both sides of the element.

Space-between--- white space is evenly distributed among elements.

Space-even-white space is distributed to one side of the element.

同时还有align-content：分配辅轴空间

center----元素在中间，上下空间分布一样。

flex-start----元素在上边，空间分布在下边

flex-end---元素分布在下面，空白分布在上面

space-around----空白分布在两边。

space-between---空白分布在元素的中间

At the same time, align-content: allocate secondary axis space.

Center---- the elements are in the middle, and the upper and lower spaces are equally distributed.

Flex-start---- the elements are on the top and the space is distributed on the bottom.

Flex-end--- elements are distributed below, and blanks are distributed above.

Space-around---- blank spaces are distributed on both sides.

Space-between--- white space is distributed in the middle of elements.

以上的元素都是通过父元素来影响子元素，但有些固定，后面我们会讲一讲更加实用更加强大的grid布局。

All the above elements affect the children through the parent elements, but some of them are fixed. Later, we will talk about the more practical and powerful grid layout.

翻译源自Google翻译

本文由learningyard新学苑原创，如有侵权，请联系删除。