CSS flex-box Information for anybody






❓ What’s flex?

flex is a CSS3 property. It’s used for creating the format and handle the content material placement.

Earlier than flex, the one method to create layouts was both utilizing ‘floats’, ‘tables’, or ‘positions’.



👍 floats, tables, and positions, vs flex :

  1. Working with Floats and positions was difficult. As a consequence of clearing the floats, dealing with completely different resolutions, and units.
  2. Layouts with floats and positions had been arduous to handle.
  3. Lot of code to satisfy identical designs for cross browsers, OS, platforms, resolutions, and many others.
  4. Creating responsive designs required further effort.
  5. Cross-browser help was the ache.



📝 Vital Ideas

  1. Axis – principal and cross
  2. Row and Column
  3. Dad or mum (container) and Kids (gadgets)
  4. Wrap
  5. Foundation
  6. Order
  7. Hole
  8. Develop & Shrink
  9. Justify-content, Align-items and Align-content
  10. Grids vs flex



💫 axis and flex

To grasp how flex works and the properties related to it we have to first perceive the idea of axis.

In flex now we have 2 axis – principal and cross. Cross axis depends on the main-axis. Cross-axis is at all times perpendicular to the main-axis.

What’s main-axis? Most important-axis is outline based mostly on the course of the flex. If the course is row then the main-axis shall be x-axis (horizontal). Whether it is column then the main-axis can be y-axis(vertical). Now, based mostly on the main-axis, cross-axis shall be modified.

Within the under picture you may see the cross-axis is at all times perpendicular to the main-axis. So, when main-axis is x-axis then cross-axis is y-axis and vice-versa.

Alt Text



👍 Defining flex

To make use of flex we have to use the show: flex. The container with show:flex develop into the guardian and the direct parts inside it is going to be known as kids or gadgets.

default flex-direction worth is row. We’re going to study flex-direction quickly.

Eg:

<part>
  <div>One</div>
  <div>Two</div>
</part>
Enter fullscreen mode

Exit fullscreen mode

part {
   show: flex;
}
Enter fullscreen mode

Exit fullscreen mode

Once we declare any container as flex flex-direction auto declared with the worth set to the row.

💻 Code

property values
show flex, inline-flex



👍 Row and column

In flex we will have both row or column. We can not have each. That is the massive distinction between grids and flex. Flex is 1 Dimensional. Row and column are the spine and have(s) of the flex. This helps in creating the format, arranging the content material. You will notice with examples as we transfer forward.

We use the property flex-direction to outline row/column.

<part>
  <div>One</div>
  <div>Two</div>
</part>
Enter fullscreen mode

Exit fullscreen mode

part { 
 show: flex;
 flex-direction: column; 
}
Enter fullscreen mode

Exit fullscreen mode

Alt Text

Alt Text

Alt Text

In flex we will reverse the row and column by utilizing only one property row-reverse and column-reverse. That is a straightforward method to obtain advanced designs however this could be solely the visible change there will not be any DOM modifications. Therefore, you will need to take into consideration the accessibility side-effects.

💻 Code – row

💻 Code – row-reverse

💻 Code – column

💻 Code – column-reverse

property values
flex-direction row, column, row-reserve, column-reserve



👍 wrap

Whereas working with row and column. It is not uncommon to see gadgets are overflowing from the flex container particularly when the gadgets are greater than the container’s width or top.

We will wrap (shifting the gadgets to the following row or column robotically) by utilizing the property flex-wrap. This won’t let the gadgets stream out of the container.

wrap property is very used particularly when the content material is dynamic.

The default worth is no-wrap.

<part>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</part>
Enter fullscreen mode

Exit fullscreen mode

part{ 
 width: 500px;
 show: flex; 
 flex-direction: row; 
 flex-wrap: wrap; 
}

part > div{
 width: 200px;
}
Enter fullscreen mode

Exit fullscreen mode

flex no-wrap

flex wrap

💻 Code

property values
flex-wrap no-wrap, flex-wrap, wrap-reverse



Responsive

One other benefit of flex is the benefit of working with responsive designs. Code-writing and managing responsive designs with flex is less complicated.

1) We needn’t change the DOM as per the display screen measurement. By simply altering one property flex-direction we will make the gadgets stack or unfold. A standard design sample for the responsive design.

2) We will use the obtainable house to regulate the gadgets (defined under)

We realized earlier that by utilizing flex we will make the factor behave as both columns or rows. Now, we will management how the gadgets ought to behave as per the obtainable house within the container.

available space



👍 develop and shrink

develop and shrink increase and contract the gadgets (flex-children) as per the obtainable house within the container (guardian flex factor).

Parts typically take the width as per the content material. The width are mounted and they don’t seem to be scalable as per the house obtainable on the display screen/decision. In such circumstances, develop and shrink helps in scaling the weather as per the house obtainable.

Develop and Shrink accepts numeric worth (constructive integer) and the gadgets will develop accordingly.

Shrink and develop settle for worth as a constructive integer. 1 means equal house.

💻 Code



👍 flex-basis

flex-basis is to set the scale of the merchandise. By default, it will be auto which implies content material measurement. If there’s width declared on the merchandise then the flex-basis worth can be revered.

If we’re utilizing measurement we will drop width. Ideally, when working with flex we must always use measurement over width.

part { 
 width: 400px;
 show: flex; 
 flex-direction: row; 
 flex-wrap: wrap; 
}

part > div{
 flex-basis: 200px;
}
Enter fullscreen mode

Exit fullscreen mode

💻 Code



👍 Order

There are a number of circumstances the place we’d want to alter the order of the weather to seem completely different visually and in DOM. In such circumstances, now we have order from flex that helps the developer to alter the order of the weather – visually.

1) Order can settle for the destructive worth. If given -1 then the factor will follow the primary place.

2) If 2 parts have the identical worth then the deal-breaker can be their order within the DOM.

3) On row-reverse, the order within the DOM shall be revered

<part>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="4">4</div>
    <div class="5">5</div>
</part>
Enter fullscreen mode

Exit fullscreen mode

.one {
  order: 5;
}

.three {
  order: 1;
}
Enter fullscreen mode

Exit fullscreen mode

order

💻 Code

Accessibility and order: As we’re altering order visually utilizing CSS and never by DOM, we have to handle the accessibility – tabbing order, focusing order, and many others.



👍 hole

To provide the house between the row and column we use hole. The problem with margins is it does not collapsed the high/backside margin and we find yourself with the additional house. Nevertheless, hole has no such subject.

When you find yourself working with flex use hole

gap

part { 
 width: 400px;
 show: flex; 
 flex-direction: row; 
 flex-wrap: wrap; 
 hole:10px;
}

part > div{
 width: 200px;
}
Enter fullscreen mode

Exit fullscreen mode

💻 Code



👍 alignment

Now, we all know that flex has a container (guardian) and gadgets (kids). To align the gadgets and container flex present us the next property:

1) justify-content
2) align-items
3) align-content

if you already know grids, then you’ll discover that flex does not have the justify-items property. A very good learn from stack overflow on WHY?

In flex we align the gadgets and have house between them throughout ‘principal’ and ‘cross’ axis.

Keep in mind main-axis depends on the flex-direction and cross-axis is at all times perpendicular to the main-axis.



👍 justify-content

Justify-content defines how the browser distributes house between and round content material gadgets throughout main-axis.

Keep in mind main-axis depends on the flex-direction

<part>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</part>
Enter fullscreen mode

Exit fullscreen mode

part { 
 width: 800px;
 show: flex; 
 flex-direction: row; 
 flex-wrap: wrap; 
 justify-content: space-between;
}

part > div{
 width: 200px;
}
Enter fullscreen mode

Exit fullscreen mode

Alt Text

Alt Text

property values
justify-content begin, heart, finish, flex-end, flex-start, space-between, space-around, space-evenly, stretch



👍 align-items

It would align the gadgets to the cross-axis

Alt Text

<part>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</part>
Enter fullscreen mode

Exit fullscreen mode

part { 
 width: 800px;
 show: flex; 
 flex-direction: row; 
 flex-wrap: wrap; 
 align-items: heart;
}

part > div{
 width: 200px;
}
Enter fullscreen mode

Exit fullscreen mode

property values
align-items stretch , flex-start ,flex-end , heart , baseline, begin, finish, …



👍 align-content

It would align the content material throughout the main-axis. It does not work with a single line. It must have a number of traces. The peak of the flex container must be greater than the peak required to show gadgets.

Within the developer language, align-content distribute the obtainable house between the rows and columns.

Alt Text

<part>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
   <div>9</div>
   <div>10</div>
</part>
Enter fullscreen mode

Exit fullscreen mode

part { 
 width: 800px;
 show: flex; 
 flex-direction: row; 
 flex-wrap: wrap; 
 justify-content:wrap;
}

part > div{
 width: 200px;
}
Enter fullscreen mode

Exit fullscreen mode

property values
align-content flex-start , flex-end , heart , space-between , space-around , space-evenly, stretch…



💫 Shorthand

There are a number of shorthands we must always concentrate on:

1) flex-grow + flex-shrink + flex-basis

flex: flex-grow flex-shrink flex-basis

flex: 1 : unit-less worth means flex-grow & relaxation is 0

flex: 2em : declaring flex-basis and relaxation is 0

flex: 1 2 : unit much less worth means flex-grow and flex-shrink

2) flex-direction + flex-wrap

flex-flow: flex-direction flex-wrap

flex-flow: column no-wrap



⚡️ CSS Grids vs flex

property grids flex
sort 2D 1D
rows/columns Can have each Can have both row or column
layouts Can create advanced format Not a good selection to create advanced format
traces It has grid-lines Would not have flex-lines
Justify-content Has Would not have
align/justify is just not depending on the rows/columns selection depending on the flex-direction



Earlier than we are saying bye do test Caniuse.com for the help of the flex and its properties at completely different.



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#CSS #flexbox #Information