Flex的使用场景

1.固定宽度

代码实现(某一侧固定,另一侧自适应):

Flex的使用场景_第1张图片




  Flex布局-一侧固定,另一侧自适应
  


  

代码实现(两侧固定,中间自适应):

Flex的使用场景_第2张图片




  Flex布局-左右两边固定,中间自适应
  


  

2.子元素等分

Flex的使用场景_第3张图片




  Flex布局-左右两边固定,中间自适应
  


  

3.子元素对齐

Flex的使用场景_第4张图片




  Flex布局-左右两边固定,中间自适应
  


  

你可能感兴趣的:(CSS)