Everything you need to know about AUTO in CSS!

She was determined to act as a piece of tricks

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

In CSS, we have auto, which can be used for properties like margin, position, height, width, etc. In this article, I’ll start by explaining how Auto works and how to get the most out of its technical details, along with some use cases and examples.

Introduction to the

The use of the auto keyword varies from attribute to attribute. For this article, I’ll explain the values in the context of each attribute.

width: auto

Block-level elements (such as

) have an initial width of auto, which makes them occupy the entire horizontal space of the block containing them.

According to the CSS specification:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = block width

When an element has a width value of auto, it contains margin, padding, and border and does not grow larger than its parent element. Where the width of the content will be the content itself minus margin, padding, and border.

Take the above model for example.

html

<div class="wrapper">
  <div class="item"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos maxime cum non cupiditate, perferendis saepe vitae fugiat id exercitationem officiis voluptate sint ducimus commodi reiciendis error itaque dolores  ipsam? Ea! </p> </div> </div>Copy the code

css

* {
    box-sizing: border-box;
}

.wrapper {
      max-width: 600px;
      margin: 2rem auto 0;
      padding: 1rem;
}

.item {
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}
Copy the code

All is well, the element item is restricted to its parent.

Yes, what happens if we change the width of the item element to 100% instead of auto? This element takes up 100% of its parent, plus the left and right margins.

// css
.item {
      width: 100%;
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}
Copy the code

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

This element is 568px wide and is the sum of the following items:

‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ = 15 + 16 + 506 + 16 + 15 = 568px

If the direction is LTR, margin-right is ignored completely. In our example, this happens. However, if the layout is RTL, then margin-left is ignored.

Codepen. IO /shadeed/pen…

Width use case: auto

Explaining the basics alone is not enough to grasp the concept, so some examples are needed.

The width is different between mobile phones and PCS

We have a set of buttons. On mobile devices, we want them to be adjacent to each other (each button wrapper takes up 50% of its parent element), whereas on desktop devices, each button should take up the full width of its parent element. What should I do?

HTML

<div class="group">
    <div class="group__item">
        <button class="c-button">Sign In</button>
    </div>
    <div class="group__item">
        <button class="c-button c-button--ghost">Register</button>
    </div>
</div>
Copy the code

The Flex layout is used here to arrange the buttons together.

CSS

.group {
    display: flex;
}

.group__item {
    width: 50%;
}
Copy the code

For PC, we need to take full width for each term. In this case, you might prefer width: 100%, right? Here’s a better solution.

CSS

@media (min-width: 800px) { /* Revert the wrapper to a block element instead of flex */ .group { display: block; } .group__item { width: auto; }}Copy the code

Since.group is a block element, using width: auto fills the available space of its parent element nicely.

Codepen. IO /shadeed/pen…

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

height: auto

When it comes to height, things are different. The height of the element is equal to what defaults to auto.

Consider the following example

<div class="wrapper">
  <div class="item">What's my height?  Copy the code

To get.item to the full height of its container, we can use one of the following methods:

to.wrappeR at a fixed height, and then zero.itemElement to addheight: 100%
right.wrapperuseflexLayout, which by default stretches the subitems.item

CSS

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}
Copy the code

Margin and auto keywords

The most common use case for margins is to center horizontally an element of known width.

Consider the following example:

To center the blue rectangle above, use the following method:

.element {
    margin-left: auto;
    margin-right: auto;
}
Copy the code

According to the CSS specification:

If the margin-left and margin-right values are both auto, they are used equally. This centers the element horizontally with respect to the edge of the containing block.

Margin: Auto with absolute positioning elements

Another less common use case for centering absolute elements is margin: Auto. When we have an element that should be centered horizontally and vertically inside its parent, we might be inclined to use translateX or translateY.

We can center elements with absolute positioning using the following method:

Set the width and height.
The element should haveposition: absolute

HTML

<div class="wrapper">
  <div class="item">I am centered.</div>
</div>
Copy the code

CSS

.wrapper {
    position: relative;
}

.item {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Copy the code

Codepen. IO /shadeed/pen…

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Flexbox

In some cases, using automatic margins in Flexbox can be very useful. When a subproject has a margin of Auto, it will be pushed to the far side. For example, if the left side of a Flex project is margin-left: Auto, it will be pushed to the far right.

Consider the following model, where the parent element is a Flex layout:

We want to push the second term to the far right, where automatic margins come in handy.

CSS

.wrapper {
    display: flex;
}

.item-2 {
    margin-left: auto;
}
Copy the code

Not only that, it can work horizontally or vertically. See the following example

CSS

.item-2 {
    margin-top: auto;
}
Copy the code

Also, if you have only one child element, you can use Margin: Auto to center it horizontally and vertically.

CSS

.item-1 {
    margin: auto;
}
Copy the code

Flex property and auto keyword

In Flexbox, we can use Flex: Auto as a subproject. What does that mean? When a subproject has flex: auto, it is equivalent to flex: 11 auto, equivalent to the following:

CSS

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
Copy the code

MDN description

The item is resized according to its width and height attributes, but grows to absorb any extra free space in the Flex container, and shrinks to its minimum size to fit the container, which is equivalent to setting “Flex: 1 1 Auto.”

A project with Flex: Auto will be sized according to its width and height, but it can be increased or decreased according to the extra space available. I didn’t know that before researching this article!

HTML

<div class="wrapper">
  <div class="item item-1">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>
Copy the code

CSS

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    height: 500px;
}

.item-1 {
    flex: auto;
}
Copy the code

Codepen. IO /shadeed/pen…

CSS grid and automatic setup one`auto` 列

In the CSS Grid, we can set a column auto, which means that its width will be based on its content length. Take a look below to see what I mean:

wrapper {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
}
Copy the code

Grid and Auto margins

When using CSS grids, you can use automatic margins to achieve flexbox-like results. When we have a grid and the grid item in it has margin-left: auto: The item will be pushed to the right and its width will be based on its content length

Consider the following example:

When we want the width of Item1 to be based on its contents, not the grid area. Margin-left: auto; margin-left: auto;

.item-1 {
    margin-left: auto;
}
Copy the code

Layout from right to left

It is worth mentioning that using margin-left: auto or margin-right: auto may work well for left-to-right layouts (such as English). But beware of subverting these values when working on a multilingual site. Better yet, use flexbox or Grid properties in case you use them to get your work done. If not, use automatic margins as a last resort and use CSS logical properties instead.

Overflow attributes

When we have an element, we should consider the minimum and maximum content it should contain. If the content exceeds the maximum value, then we need to display a scroll bar.

You may want to use the following:

element {
  overflow-y: scroll;
}
Copy the code

However, this may display a scroll bar, even if the content height is short. See the following example

In Chrome Windows, the scroll bar always shows up, which is incorrect and confusing behavior.

By using the auto keyword, we can ensure that the scrollbar does not display unless the content is taller than its container.

According to the MDN:

Depends on the user agent. If the content fits inside the fill box, it looks the same as the visible content, but a new block formatting context is still established. If the content overflows, the desktop browser provides a scroll bar.

.element {
  overflow-y: auto;
}
Copy the code

Position attribute

For the CSS positioning properties top, right, bottom, and left, we can use the auto keyword as their value. The next thing I want to explain is that it is new to me, and I learned it while researching this article.

Consider the following model:

We have a Wrapper element with an inside margin and a child. Subitems are absolutely located, but do not have any location attributes.

.wrapper {
    position: relative;
    padding: 16px;
}

.item {
    position: absolute;
    width: 100px;
    height: 100px;
}
Copy the code

In CSS, each property has an initial/default value. If I check the subitems and go to computed Styles, what do you guess is the value of the left property?

The default value for left is 16px, even if it is not set. Why does this happen? Well, the reason is that absolutely positioned elements have position: relative to their nearest parent element. The parent has the padding: 16px, so the children are 16px at the top and left. Interesting, isn’t it?

Now, you might ask, what’s the good of this? Okay, let me continue.

Assuming that the child must be 100 pixels to the left in the smaller viewport, it should revert to the default position for the desktop.

.wrapper {
    position: relative;
}

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}
Copy the code

How to reset left in a larger viewport? We can’t use left:0 because that would glue the child element to the edge, which is not what we want. See the model below to see what I mean.

To reset children in the correct way, we should use left: Auto. According to the MDN:

If the element is static, it is positioned where it should be positioned horizontally

This means that it respects the padding and does not paste the child entry to the edge of its parent.

.item { position: absolute; left: 100px; width: 100px; height: 100px; } @media (min-width: 800px) { .item { /* This is equivalent to left: 16px */ left: auto; }}Copy the code

The same is true for the top attribute. For the right and bottom attributes, the default computed value is equal to the width and height of the element, respectively.

Codepen. IO /shadeed/pen…

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Use cases and examples

It is worth mentioning that the following use cases may not be enough, but I tried to add a few in the hope that they will be useful to you.

Tip the arrow

For the prompt box, we need a pointing arrow to make it clearer to the user. If we are designing a system, we should consider multiple states. For example, the prompt arrow points to the left and another arrow points to the right.

.tooltip:before {/* arrow code */ position: absolute; left: -15px; } /* This is a version with an arrow pointing to the right */.tooltip.to-right:before {/* Arrow code */ position: absolute; left: auto; right: -15px;Copy the code

Note that in the initial implementation, I used left: auto to override left: -15px. For your information, this is very common and I suggest using the following instead:

.tooltip:before {
    position: absolute;
    right: 100%;
}

.tooltip.to-right:before {
    /* Arrow code */
    position: absolute;
    right: auto;
    left: 100%;
}
Copy the code

By using 100%, we avoid using a hard-coded value (arrow width) that might fail if we changed the size of the arrow. This is a more time-tested solution.

Card components

You might have a card component that has an operation in the upper left corner, which might be just for decoration, or it might be a useful operation. Whatever it is, you should consider that it works both ways.

We can easily reset its base implementation by using left: Auto.

.card .icon {
    position: absolute;
    left: 15px;
    top: 15px;
}

.card.is-right .icon {
    left: auto;
    right: 15px;
}    
Copy the code

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Flexbox and automatic margins

When it comes to flexbox, the possibilities are endless. By combining this with automatic margins, we can build powerful layouts.

Consider the following example

We include a title line, a description line, and an action button line on the right. We want the action button on the right.

HTML

<div class="item">
    <div class="item-group"> <! -- Title and description --> </div> <button class="item__action">Confirm</button>
</div>
Copy the code

CSS

.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item__action {
  margin-left: auto;
}
Copy the code

That’s it! Push the action to the far right corner by using margin-left: auto. Even better, if you’re building a multilingual site, we can use CSS logical properties. The CSS will look like this:

.item__action {
    margin-inline-start: auto;
}
Copy the code

CSS Grid and automatic margins

When adding margins to grid items, it can be a fixed value, a percentage value, or an automatic value. I’m more interested in Auto. Consider the following:

HTML

<p class="input-group">
    <label for="">Full Name</label>
    <input type="email" name="" id="">
</p>
Copy the code

CSS

.input-group { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; @media (min-width: 700px) {grid-template-columns: 0.7fr 2fr; }}Copy the code

I want to align label with the left edge of the input. To do this, I need to apply the following:

.input-group label {
    margin-left: auto;
}
Copy the code

Modal design

When doing modal design, it is important to consider what happens when the content is very high. In this case, we can use the following code:

.modal-body {
    overflow-y: auto;
}
Copy the code

This way, it only shows the scroll bar when the content is tall enough.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: css-tricks.com/almanac/pro…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.

Everything you need to know about AUTO in CSS!

Introduction to the

width: auto

Width use case: auto

The width is different between mobile phones and PCS

height: auto

Margin and auto keywords

Margin: Auto with absolute positioning elements

Flexbox

Flex property and auto keyword

CSS grid and automatic setup oneauto 列

Grid and Auto margins

Layout from right to left

Overflow attributes

Position attribute

Use cases and examples

Tip the arrow

Card components

Flexbox and automatic margins

CSS Grid and automatic margins

Modal design

communication

Related Posts

A quick chat and a front man

Super detailed KOA source code parsing (read not I hit you)

Page Performance optimization

CSS grid and automatic setup one`auto` 列