如何在包装时使容器收缩以适应子元素？

灵活布局必须有一个将显示属性设置为 flex 的父元素。灵活容器的直接子元素自动成为灵活项目。

方法：

• 下面的元素表示一个带有四个 flex 项目的 flex 容器。

  
      
  
          
  icecream
          
  sandwich
          
  juice
          
  coldrink
             
  
  

• 父元素(容器)

  flex 容器通过使 display 属性变为 flex 变得灵活：

  .flex-container {
    display: flex;
  }
  

• flex-wrap 属性

  flex-wrap 属性声明 flex 项目是否应该换行。

  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  

  它包装值指定弹性项目将在必要时包装

• 文本对齐

  text-align 属性设置文本的水平对齐方式。文本可以左对齐或右对齐、居中或两端对齐。

  h1 {
    text-align: center;
  }
    
  h2 {
    text-align: left;
  }
    
  h3 {
    text-align: right;
  }
  

• CSS 设置高度和宽度

  高度和宽度属性用于设置元素的高度和宽度。

  div {
    height: 500px;
    width: 50%;
  }
  

• CSS 填充

  CSS padding 属性用于在元素周围、边框内生成空间。

  div {
    padding-top: 100px;
    padding-right: 50px;
    padding-bottom: 1000px;
    padding-left: 100px;
  }
  

• CSS 边距

  CSS margin 属性用于在元素周围、边框外创建空间。

  p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
  }
  

例子：

    

        
1
        
2
        
3
        
4
        
5
        
6
    
    
 Geeks for Geeks 

    

输出：