html – 使用flex 对齐项目

前端之家收集整理的这篇文章主要介绍了html – 使用flex 对齐项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参见英文答案 > In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?                                    5个
我有如下要求:

|[]                  [][]|

视口左侧的一个元素和视口右侧的两个元素.要学习显示:flex,我正在尝试这种布局而不包装元素.

FlexBox可以实现这种布局吗?

这是HTML:

我尝试使用align-items和align-self但没有用.请帮忙.

CSS:

.parent{
     display: flex;  // flexBox
}
最佳答案
您可以在右侧需要的div中使用margin-left:auto:

.parent {
  display: flex;
  height: 100px;
  width: 100%;
}

.child {
  flex: 0 0 20px;
  border: solid 1px green;
}

.child--right {
  margin-left: auto;
}

猜你在找的HTML相关文章