42.构建一个简单的Flexbox布局

42.构建一个简单的Flexbox布局_第1张图片

● 之前我们使用浮动布局实现以上的布局效果,现在我们通过flexbox去实现如上内容;

首先需要添加div,来构建弹性布局

42.构建一个简单的Flexbox布局_第2张图片

之后CSS代码如下

.row {
display: flex;
  align-items: flex-start;  #默认情况下,flexbox允许元素拉伸
  gap: 75px;  #添加空隙
  margin-bottom: 60px;
}

article {
  flex:1;  
  margin-bottom: 0;
}

aside {
  flex:0 0 300px;
}

你可能感兴趣的:(HTML5+CSS3,HTML5+CSS3)