html – 使用flex 对齐项目
发布时间:2020-12-14 23:28:42 所属栏目:资源 来源:网络整理
导读:参见英文答案 In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?5个 我有如下要求: |[] [][]| 视口左侧的一个元素和视口右侧的两个元素.要学习显示:flex,我正在尝试这种布局而不包装元素. Flexbox可以实现这种布局吗?
参见英文答案 >
In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?5个
我有如下要求: |[] [][]| 视口左侧的一个元素和视口右侧的两个元素.要学习显示:flex,我正在尝试这种布局而不包装元素. Flexbox可以实现这种布局吗? 这是HTML: <div class="parent"> <div class="child child--left"></div> <div class="child child--right"></div> <div class="child child--right"></div> </div> 我尝试使用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; } <div class="parent"> <div class="child"></div> <div class="child child--right"></div> <div class="child"></div> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |