Posted by admin at March 11, 2020
A website’s User Interface (“UI”) has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.
CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.
This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.
Placing the CSS property display: flex;
on an element allows you to use other flex properties to build a responsive page.
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
#box-container {
height: 500px;
display:flex;
}
#box-1 {
background-color: orange;
width: 50%;
height: 50%;
text-align:center;
color:#fff;
}
#box-2 {
background-color: green;
width: 50%;
height: 50%;
text-align:center;
color:#fff;
}
Adding display: flex
to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction
property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.
Other options for flex-direction
are row-reverse and column-reverse.
Note: The default value for the flex-direction
property is row
.
Just add the flex-direction: row-reverse to reverse the rows.
#box-container {
height: 500px;
display:flex;
flex-direction:row-reverse;
}
For Making the box vertically stacking change flex-direction
to the #box-container
element, and give it a value of column
.
#box-container {
height: 500px;
display:flex;
flex-direction:column;
}
Comments