CSS Flexbox

Flexbox allows us to implement user interfaces and web page layout more easily than we did from 2000 to 2014.

Most browsers already implement the functionality of Flexbox or in Castilian "Flexible Boxes".

Lots of designers are using Flexbox functionality and new versions of CSS framework like Bootstrap 4 also incorporate it for their operation.

Flexbox facilitates the layout of the website and all its components. It also makes it easy to adapt the page to different screen sizes.

A Flexbox or flexible box consists of a container element and inside it a series of items:

photo

To define an element as a container for flexbox we must define the display property with the value "flex", with this we already have a flexible box.

page1.html

#container1 {
  display: flex;
  background-color: #ddd;
}

#container1 div {
  border:1px solid black;
  padding:1rem;
}

styles.css

<!DOCTYPE html>
<html>

<head>
    <title>flex example - Coding180.com</title>
    <meta charset="UTF-8">
    <link rel="StyleSheet" href="style.css" type="text/css">
</head>

<body>
    <div id="container1">
        <div> he reproves in pleasure he wants to be a feather in pain,
 let him flee from pain, let him not be born.
            Unless they are blinded by desire, they do not come out, 
they are in fault who abandon their duties, the
            soul softens, that is toils."</div>
        <div> he will criticize in pleasure, he wants to be a hair from 
pain, and he will flee from pain, and there will
            be no birth."</div>
        <div> he reproves in pleasure he wants to be a feather
 in pain, let him flee from pain, let him not be born.
            Unless they are blinded by desire, they do not 
come out, they are in fault who abandon their duties, the
            soul softens, that is toils."</div>
    </div>
</body>

</html>

photo

We must load the "flex" value in the "display" property so that #container1 becomes a container for flex-box:

#container1 {
  display: flex;
  background-color: #ddd;
}

Then the three contained divs are transformed into flexible boxes that automatically resize in width and height when we resize the browser.

We will see that there is a set of properties that allow us to define the location, size, etc. of the items inside the container.

Robort Gabriel

Lagos, Nigeria

Skills