Use display: flex to locate two boxes
Just add display: flex; in the CSS of an element;, You can use other flex attributes to build responsive pages.
Create a row using the flex direction attribute
Adding the display: flex attribute to an element can make it a flex container, and then you can arrange the items of the element in rows or columns. As long as you add the flex direction attribute to the parent element and set the attribute value to row or column, you can arrange all its child elements horizontally or vertically.
<style>
#box-container {
display: flex;
height: 500px;
flex-direction: row-reverse;
}
#box-1 {
background-color: dodgerblue;
width: 50%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 50%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
Create a column using the flex direction attribute
<style>
#box-container {
display: flex;
height: 500px;
flex-direction: column;
}
#box-1 {
background-color: dodgerblue;
width: 50%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 50%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
Aligning elements with the justify content attribute
The direction in which the child elements are arranged is called the main axis. For rows, the spindle runs horizontally through each item; For columns, the spindle runs vertically through each item.
There are several options for how to discharge flex projects along the main axis. The commonly used one is justify content: center;: That is, flex child elements are arranged in the middle of the flex container.
<style>
#box-container {
background: gray;
display: flex;
height: 500px;
justify-content: center;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 100%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 100%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
Other options besides center include:
Flex start: arranges items from the start of the flex container. Move items to the left for rows and to the top for columns. If the value of justify content is not set, this is the default value.
Flex end: arranges items from the end of the flex container. Move items to the right for rows and to the bottom for columns.
Space between: the items are centered along the main axis with a certain spacing. The first and last items are placed on the edge of the container. For example, in a row, the first item will be close to the left of the container, the last item will be close to the right of the container, and then the other items will be arranged evenly.
Space around: similar to space between, but the first and last items are not close to the edge of the container, and the space between all items is evenly arranged.
Space even: space is evenly distributed among flex items, and there is a complete space at either end of the flex container.
Align elements using the align items attribute
The align items attribute in CSS is used to define the alignment of flex child elements along the cross axis. For a row, it defines the up and down alignment of elements; For columns, it defines the left-right alignment of elements.
<style>
#box-container {
background: gray;
display: flex;
height: 500px;
align-items: center;
}
#box-1 {
background-color: dodgerblue;
width: 200px;
font-size: 24px;
}
#box-2 {
background-color: orangered;
width: 200px;
font-size: 18px;
}
</style>
<div id="box-container">
<div id="box-1"><p>Hello</p></div>
<div id="box-2"><p>Goodbye</p></div>
</div>
The optional values for align items include:
Flex start: align items from the start of the flex container. For rows, move the item to the top of the container; For columns, move items to the left of the container.
Flex end: align items from the end of the flex container. For rows, move the item to the bottom of the container; For columns, move items to the right of the container.
Center: center the project. For rows, vertically centered (items are the same distance from the top and bottom); For a column, it is centered horizontally (items are the same distance from the left and right).
Stretch: stretch the item to fill the flex container. For example, items in rows stretch from the top to the bottom of a container. If the value of align items is not set, this is the default value.
Baseline: align along the baseline. Baseline is a text related concept, which can be regarded as the lower baseline of alphabetic arrangement.
Wrap a row or column with the flex wrap attribute
CSS flexbox has the function of splitting flex containers into multiple rows (or columns). By default, the flex container resizes items to fit them all together. For rows, all items will be in a straight line.
However, using the flex wrap attribute can wrap the project. This means that the extra child elements will be moved to a new row or column. The breakpoint at which a newline occurs is determined by the size of the child element and the container.
nowrap: default value, no line break.
wrap: if the arrangement is based on behavior, the rows are arranged from top to bottom; If the arrangement is based on columns, the columns are arranged from left to right.
Wrap reverse: if the arrangement is based on behavior, the rows are arranged from bottom to top; If the arrangement is based on columns, the columns are arranged from right to left.
<style>
#box-container {
background: gray;
display: flex;
height: 100%;
flex-wrap: wrap;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-5 {
background-color: green;
width: 25%;
height: 50%;
}
#box-6 {
background-color: black;
width: 25%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
</div>
Transform to, increase readability:
