【前端】CSS弹性布局 display-flex

一、display-flex弹性布局

 Flex，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

在父DIV中使用

display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
display: flex; //将对象作为弹性伸缩盒显示

// 沿水平主轴让元素从左向右排列 
flex-direction:row;

// 让元素沿垂直主轴从上到下垂直排列
flex-direction:column;

// 沿水平主轴让元素从右向左排列
flex-direction:row-reverse;

在子DIV中使用：

flex:0.5;

二、图片垂直水平居中

HTML

<div class="container">
  <img src="path/to/your/image.jpg" alt="Centered Image">
</div>

CSS

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 400px; /* 容器的高度，根据需要设置 */
}