CSS - Flex 一项向左浮动 [英] CSS - Flex one item floated left

问题描述

这里有一个简单的 flex 布局示例.

所有元素都在右边，justify-content: flex-end;

我需要留下第一个元素One".

我可以用绝对定位来做到这一点，但有没有一种灵活的方式来做到这一点.

.content{背景:灰色；白颜色;字体系列:无衬线；填充:10px 5px；显示:弹性；justify-content: flex-end;}.堵塞{背景:红色；填充:5px；右边距:5px；}.一{对齐项目:flex-start；背景:蓝色；//左:0;//位置:绝对；}

一
<div class='block two'>二
三
四

解决方案

align-items 设置在 flex 容器上，而不是 flex item 上，使用 align-self，仍然会影响横轴，垂直移动一个 flex row 项目.

由于没有 justify-self: flex-start 用于弹性项目(目前)，您可以使用自动边距，因此如果您添加 margin-right: auto; 在第一个元素上，它将被推到左边.

从技术上讲，您可以在第二个项目上设置 margin-left: auto，但为了可读性，我建议将其设置在目标元素上.

堆栈片段

.content{背景:灰色；白颜色;字体系列:无衬线；填充:10px 5px；显示:弹性；justify-content: flex-end;}.堵塞{背景:红色；填充:5px；右边距:5px；}.一{右边距:自动；背景:蓝色；}

一
<div class='block two'>二
三
四

I have a simple example of the flex layout here.

All the elements are on the right with justify-content: flex-end;

I need the first element 'One' to be left.

I can do this with absolute positioning but is there a flex way to do this.

.content{
  background: grey;
  color: white;
  font-family: sans-serif;
  padding: 10px 5px;
  display: flex;
  justify-content: flex-end;
}

.block{
  background: red;
  padding: 5px;
  margin-right: 5px;
}

.one{
  align-items: flex-start;
  background: blue;
  //left: 0;
  //position: absolute;
}

<div class='content'>
  <div class='block one'>
    One
  </div>
  
  <div class='block two'>
    Two
  </div>
  
  <div class='block three'>
    Three
  </div>
  
  <div class='block four'>
    Four
  </div>
</div>

解决方案

The align-items is set on flex container, not flex item, which use align-self, still, it affect the cross axis, moving a flex row item vertically.

Since there is no justify-self: flex-start to be used on flex items (yet), you can use auto margins, so if you add margin-right: auto; on the first element it will be pushed to the left.

Technically, you could set margin-left: auto on the 2nd item, though for readability I recommend to set it on the targeted element.

Stack snippet

.content{
  background: grey;
  color: white;
  font-family: sans-serif;
  padding: 10px 5px;
  display: flex;
  justify-content: flex-end;
}

.block{
  background: red;
  padding: 5px;
  margin-right: 5px;
}

.one{
  margin-right: auto;
  background: blue;
}

<div class='content'>
  <div class='block one'>
    One
  </div>
  
  <div class='block two'>
    Two
  </div>
  
  <div class='block three'>
    Three
  </div>
  
  <div class='block four'>
    Four
  </div>
</div>

这篇关于CSS - Flex 一项向左浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！