html – 使用flex 对齐项目

发布时间：2020-12-14 22:36:59 所属栏目：资源来源：网络整理

导读：参见英文答案 In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?????????????????????????????????????5个我有如下要求： |[] [][]| 视口左侧的一个元素和视口右侧的两个元素.要学习显示：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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!