What Does Flex: 1 Mean

What does flex: 1 mean?

Here is the explanation:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <positive-number>

Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that
receives the specified proportion of the free space in the flex
container. If all items in the flex container use this pattern, their
sizes will be proportional to the specified flex factor.

Therefore flex:1 is equivalent to flex: 1 1 0

The meaning and benefits of flex: 1

The CSS border, padding and margin properties are all shorthand properties. This means they consolidate multiple properties into one.

The CSS flex property is no different. It's simply a shorthand way to consolidate:

• flex-grow
• flex-shrink
• flex-basis

So, use the flex property for the same reason you would use any other CSS shorthand property:

• to minimize your code
• reset/change default values

In terms of function, there's nothing unique about the flex property. Anything that the flex property can do, can also be done using a combination of the longhand properties.

For example:

flex: 2 1 250px

is exactly the same as:

• flex-grow: 2
• flex-shrink: 1
• flex-basis: 250px

The flexbox spec then takes "shorthanding" a step further, defining an even shorter shorthand:

flex: <positive-number>

Equivalent to flex: <positive-number> 1 0.

Makes the flex item flexible and sets the flex basis to zero.

^{http://www.w3.org/TR/css-flexbox-1/#flex-common}

Here's a list of commonly used flex shorthand rules:

• https://www.w3.org/TR/css-flexbox-1/#flex-common

The spec also makes this recommendation:

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

^{http://www.w3.org/TR/css-flexbox-1/#flex-components}

Here's a related post with more info:

• Understanding the flex property

The difference between flex:1 and flex-grow:1

flex

The flex property is a shorthand for setting:

• flex-grow
• flex-shrink
• flex-basis

The flex: 1 rule is supposed to compute to this:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

These values are defined in the spec. See section 7.1.1. Basic Values of flex

I say "supposed to compute" because, in IE11 and possibly other browsers, a unit of measure, such as px or %, is appended to the 0 value in flex-basis. This can make a difference (example).

flex-grow

The flex-grow property (which distributes free space in the container among flex items), when declared by itself, leaves flex-shrink and flex-basis at their initial values.

So when you set flex-grow: 1, the browser renders this:

• flex-grow: 1 (overrides the default value, which is 0)
• flex-shrink: 1 (this is the default value)
• flex-basis: auto (this is the default value)

The difference between flex: 1 and flex-grow: 1

Ultimately, the difference between flex: 1 and flex-grow: 1 is that the former sets flex-basis: 0, and the latter keeps the default flex-basis: auto.

For a complete explanation of the difference between flex-basis: 0 and flex-basis: auto see this post:

• Make flex-grow expand items based on their original size

Your code example

The reason you're seeing a difference in your code is that flex-basis controls height in a column-direction container.

In Chrome, with flex-basis: auto, the height of the element is 450px (500px parent - 50px header). In other words, flex-grow is free to distribute the free space.

With flex-basis: 0, the height of the element is 0, and flex-grow has no free space to distribute.

The height: 100% on the child of the flex item is simply ignored because it isn't being applied properly, as explained in these posts:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent

In reading the posts above you'll also understand why your code renders differently in Firefox, Safari, Edge and IE.

React Native Stylesheet: what does {flex:1} do?

There is quite a difference between css flexbox and the one implemented by Facebook. Lots of things in common but defaults are very different. Specifically:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: attribute is only used when at the same level there are few components with different flex values (flex: 1, flex: 3) means that the second element should be 3 times bigger than the first one. flex attribute is the only one supported (no grow/shrink support).

More info: https://github.com/facebook/css-layout

How flex: 1 affects height of flex items?

Firstly, you've defined the container with display: flex. The default flex-direction is row.

This means the the main axis is horizontal.

Hence, the flex property is controlling width. It has no affect on height.

You would have to shift the main axis (by adding flex-direction: column) in order to apply the flex property vertically.

Secondly, if you change the height: 500px to min-height: 500px, you will solve the overflow problem (without having to change flex-direction).

#about {
  min-height: 500px;
  border: 2px solid blue;
}

.row {
  display: flex;
  border: 2px solid black;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.column {
  flex: 1;
  border: 2px dashed red;
}

<section id="about">
  <div class="row">
    <div class="column">
      <img src="https://i.stack.imgur.com/yat2N.jpg" alt="Sample Image">
    </div>
    <div class="column"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam dicta dolore suscipit quidem, hic nihil aliquid officia porro illum! Necessitatibus cupiditate, sapiente cum recusandae tenetur dolore veritatis in temporibus perferendis.
      Ex corrupti voluptatibus eaque aliquam quis soluta veniam non dicta repellendus ea iure temporibus assumenda placeat accusantium quae iste, corporis maxime dolorum quisquam neque est sint asperiores doloribus. Quibusdam ducimus saepe distinctio
      illum veniam voluptates amet quod perferendis dolorem, deleniti mollitia. Ab aperiam, ea itaque tempore molestias ullam sint accusamus totam reiciendis laborum. At natus consequatur ex officia. Porro dolor accusamus blanditiis nam commodi provident
      assumenda facere adipisci perferendis. </div>
  </div>
</section>

flex: 1 1 --> <'flex-grow'> <'flex-shrink'>

flex: 1 50% 
  1   -->  <'flex-grow'> <'flex-shrink'>? --> <'flex-grow'>
  50% --> <'flex-basis'>

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.timeline {
  display: flex;
}

.timeline>div {
  display: flex;
  border: 1px solid red;
  flex: 1;
}

.events {
  width: 50%;
}

.date,
.relative,
.events {
  border: 1px solid green;
}

.date,
.relative {
  width: 80px;
}

<!DOCTYPE html>
<html lang="fr">

<head></head>

<body>
  <div class="timeline">
    <p class="date">a1</p>
    <p class="relative">a2</p>
    <div>
      <div class="events"></div>
      <div class="events"></div>
    </div>
  </div>

  <div class="timeline">
    <p class="date">b1</p>
    <p class="relative">b2</p>
    <div>
      <div class="events">
        <p>Lorem ipsum</p>
      </div>
      <div class="events">
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ium Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </div>
  </div>
</body>

</html>

.flexbox{display:flex}.item1,.item2{height:60px}.item1{flex:1 1 100%;background-color:lightblue}.item2{flex:0 0 100%;background-color:goldenrod}

<div class="flexbox">    <div class="item1"></div>    <div class="item2"></div></div>