Understand Flexbox elastic box and flexbox elastic box

Understand Flexbox elastic box and flexbox elastic box

Bytes

1: to start using Flexbox, you must first turn the parent element into a Flex container..

You can explicitly set in the parent Elementdisplay:flexOrdisplay:inline-flex. That's simple, so you can start using the Flexbox module.

 

2. Flex container Properties

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

Flex-direction: Row | column | row-reverse | column-reverse;

 

Flex-wrap: Wrap | nowrap | wrap-reverse;

 

Flex-flow:flex-flowYesflex-directionAndflex-wrapStenographer attributes of two attributes

You still remember to useborder?border: 1px solid red. The concept here is the same, and multiple values are written in the same row, for example, the following example:

ul {    flex-flow: row wrap;}

justify-contentThe property can accept one of the following five values:

ul {    justify-content: flex-start || flex-end || center || space-between || space-around}

align-itemsProperties are similarjustify-contentAttribute. Only understoodjustify-contentAttribute to better understand this attribute.

align-itemsAttributes can accept these attribute values:flex-start || flex-end || center || stretch || baseline.

ul {    align-items: flex-start || flex-end || center || stretch || baseline}

It is mainly used to control the Flex project inCross-AxisAlignment. This is alsoalign-itemsAndjustify-contentThe difference between two attributes.

Align-content

Remember what we discussed earlierwrapAttribute? We have added more Flex projects to the Flex container. Arrange Flex projects in the Flex container in multiple rows.

align-contentAttribute is used for multi-row Flex containers. It is also used to control the arrangement, effect andalign-itemsThe value is the same,baselineAttribute Value.

Imagealign-itemsThe property is the same, and its default value isstretch. You should be familiar with these values now. Then how does it affect the multi-row arrangement of 10 Flex projects in the Flex container.

 

3. Flex Project Properties

order || flex-grow || flex-shrink || flex-basis

Flex-basis

As I said before, I did not have a Flex project. But we can also control it.

flex-basisAttribute can specify the initial size of the Flex project. That isflex-growAndflex-shrinkProperty to adapt to the Flex container.

As we have mentioned above, we need a little time to enhance our understanding of them.

flex-basisThe default value isauto.flex-basisAnywidthAny value of the property. For example% || em || rem || px.

Note:: Ifflex-basisThe attribute value is0The Unit is also required. That isflex-basis: 0pxCannot be writtenflex-basis:0.

By default, the initial width of a Flex project is determinedflex-basisThe default value is:flex-basis: auto. The Flex project width is calculated automatically based on the amount of content (obviouslypaddingValue ).

Flex stenographer

flexYesflex-grow,flex-shrinkAndflex-basisShorthand for the three attributes ).

Pay attention to the order between them.flex-growFirst, thenflex-shrinkAnd finallyflex-basis. AbbreviatedGSBTo help you better remember.

IfflexWhat happens if there is one less value in the attribute value?

If you only setflex-growAndflex-shrinkValue,flex-basisIt may be the default value.0. This is the so-called absolute flex project. Only when you setflex-basis, You will get a relatively flex project.

Flex: 0 1 auto

li {    flex: 0 1 auto;}

This is equivalent to writingflexDefault attribute values and all Flex projects are default actions.

Flex: 0 0 auto

li {    flex: 0 0 auto;}

This is equivalentflex: none.

Still old rule: the width is automatically calculated, but the elastic project will not stretch or contract (because both are set to zero ). Both the stretch and shrink switches are turned off.

It is basically a fixed-width element, and its initial width is based on the content size in the elastic project.

Flex: 1 auto

This correspondsflex: autoThe project is the same.

Or follow the rules I set above. That is,Automatically calculates the initialization width, but expands or shrinks to fit the entire available width if necessary.

The stretch and shrink switch is turned on, and the width is automatically calculated.

Flex: "positive number"

A positive number can represent any positive number (without quotation marks ). This correspondsFlex: "positive" 1 0Same.

flex: 2 1 0And writeflex: 2Is the same,2Represents any positive number.

Li {flex: 2 1 0;/* same as flex: 2 */}

Like the rules I set above, that is,Set the initial width of the elastic project to zero (um? No width ?), Stretch the project to fill up the available space and contract the project as soon as possible.

If there is no width for an elastic project, how can we calculate the width?

This timeflex-growThe value takes effect, and it determines the degree to which the elastic project becomes wider. It is responsible for the problem of no width.

When there are multiple elastic projects and their initial widthflex-basisWhen it is set to any zero-based value, for example0px, Use thisflexAbbreviations are more practical.

Actually, the width of the elastic project is based onflex-growValue ratio.

Remember settingsflex-grow : 1The elastic project will fill up the available space. The stretch switch is enabled.

There are two elastic projects. Oneflex-growThe property value is1And the other is2So what will happen?

The stretch switch is enabled for both projects. However, the stretching degree is different,1And2.

Both of them will fill up the available space, but it is proportional.

It works like this: the previous one occupies1/3Available space, the latter occupies2/3.

Absolute and relative Flex Projects

The spacing of a Flex project is calculated based on its content size. In the absolute Flex projectflexAttribute, rather than content.

The absolute Flex project width is only based onflexProperty, while the width of the Flex project is based on the content size..

Align-self

align-selfAttributes further allow us to better control elastic projects.

You have seenalign-itemsHow attributes help align all the elastic projects in the elastic container as a whole.

What should I do if I want to change the position of an Elastic project along the side axis without affecting adjacent elastic projects?

This isalign-selfThe attribute has been highlighted.

The value of this attribute can be one of these values:auto || flex-start || flex-end || center || baseline || stretch.

Auto-margin alignment

When used in a Flex Projectmargin: autoThe value isauto(Left, right, or both) will occupy all the remaining space.

Solve the Problem of space usage ratio of the nested flex container

There must be a way to put all of these in one row, and each paragraph occupies equal space for this row. Use Flexbox! The concept here is the same as that used in many raster systems.

Li {display: flex;/* Section is now displayed on a row */padding: 0 20px;/* Reserved breathing space */min-height: 50px;} li p {flex: 0 0 25%;/* This is sweet Noodle Sauce */}

What will happen to the section?

flex: 0 0 25%;

"Do not stretch or contract, but each paragraph should occupy25%Available space". The space occupied by paragraphs is equal.