What is elastic layout in css-CSS Tutorial-php.cn

What is elastic layout in css

王林

Release： 2020-11-16 11:08:03

Original

4077 people have browsed it

Flexible layout in CSS is a layout method that ensures that elements have appropriate behavior when the page needs to adapt to different screen sizes and device types. The purpose of introducing the flexible layout model is to provide a more efficient way to arrange, align and allocate white space to the child elements of a container.

What is elastic layout in css

Introduction to elastic layout:

Flexible box is a new layout mode of CSS3.

(Learning video sharing: css video tutorial)

CSS3 Flexible Box (Flexible Box or flexbox) is a method when the page needs to adapt to different screen sizes and devices Types are laid out in a way that ensures that elements have appropriate behavior.

The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align and allocate empty space to sub-elements in a container.

Flexible box content:

The flexible box is composed of a flexible container (Flex container) and a flexible sub-element (Flex item).

A flexible container is defined as a flexible container by setting the value of the display property to flex or inline-flex.

The flexible container contains one or more flexible sub-elements.

Note: The outside of the flexible container and inside the flexible sub-element are rendered normally. The flex box only defines how the flex child elements are laid out within the flex container.

Flexible sub-elements are usually displayed in one line within the flexible box. By default there is only one row per container.

The following elements show elastic child elements displayed in a row, from left to right

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;    
    display: flex;    
    width: 400px;    
    height: 250px;    
    background-color: lightgrey;}
 .flex-item {
    background-color: cornflowerblue;    
    width: 100px;    
    height: 100px;    
    margin: 10px;}
</style>
</head>
<body>
 <div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> </div>
 </body>
</html>

Copy after login

Related recommendations:CSS tutorial

The above is the detailed content of What is elastic layout in css. For more information, please follow other related articles on the PHP Chinese website!