- Bootstrap 4：Responsive Web Design
- Silvio Moreto Matt Lambert Benjamin Jakobus Jason Marah
- 543字
- 2021-07-09 18:54:46
Getting ready for flexbox!
In version 4 of Bootstrap, flexbox support has finally arrived! However, it is an opt-in that can be used. The first step is to understand a little bit of flexbox, just in case you don't know, and then start using it.
We will not add any other element to our landing page example, since support for flexbox just begun with Bootstrap 4. We will cover it only to clarify this new option.
Understanding flexbox
The definition of flexbox came out with the CSS3 specifications. Its main purpose is to better organize elements in a web page in a predictable manner. It can be seen as an option similar to float but one that offers a lot more choices, such as reordering elements and avoiding known issues of float, for example, the clearfix workaround.
For a hierarchical organization, first of all, you need to wrap the element of all the flex items (such as the columns inside a .row). It is also possible to play with the direction and axis from the wrapping element.
To exemplify the usage, let's create an HTML example. Create another file, named flexbox.html, use your base template and place the HTML code inside the <body> tag:
<body>
<div class="wrapping-flex">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
So, in this case, we must make the div.wrapping-flex the flex wrapping element. Apply the following CSS and you will get the child elements placed inline:
.wrapping-flex {
display: -webkit-flex;
display: flex;
background-color: #CCC;
}
.wrapping-flex > div {
background-color: #ECA45A;
margin: 1rem;
padding: 1.5rem;
}
Create this is a sample HTML page and you will get the following output:
There are a plenty of options for flexbox. I do recommend the guide at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for you to learn more about flexbox, since it is not our focus.
However, let's show a very powerful use case of flexbox. Have you ever faced a problem with aligning one div inside another vertically? I hope not, because it can be a pain in the neck, even more if you made it for older browsers.
With flexbox, we just have to apply the following CSS:
.wrapping-flex {
display: -webkit-flex;
display: flex;
background-color: #CCC;
height: 12rem;
width: 50%;
margin-left: 20%;
}
.wrapping-flex > div {
background-color: #ECA45A;
margin: 1rem;
padding: 1.5rem;
}
.wrapping-flex .item2 {
align-self: center;
height: 5rem;
}
We added a height: 12rem to the wrapping element and set align-self: center and height: 5rem to the .item2 element. With that, we align the second flex child <div> in the center, while the other two children continue to occupy the full height, as shown in the following screenshot:
Playing with Bootstrap and flexbox
Version 4 of Bootstrap provides two ways to use flexbox. The first one is with Sass, where you need to set the $enable-flex variable to the true state.
The other option is to download the compiled CSS version using the flex opt-in. The compiled version can be found in the Bootstrap repository (https://github.com/twbs/bootstrap/releases).
With regard to using flexbox, you will have limited browser support, since not all browsers are ready for this property. Consider using it if you will have access only from new browsers, such as Internet Explorer versions newer than v10.
Check out the currently available support for the flexbox property here: