web-dev-qa-db-ja.com

Flexbox= float right

Flexbox一般的なユースケースのレイアウトのベストプラクティスに関するソリューションを探しています。

example

この例では、Flexboxを使用して、スコア番号を右にフロートさせます。使用することを考えました。

position: absolute,
right: 0,

しかし、問題は、外側ボックスと中央揃えを使用できないことです。

私が考えることができる別の方法は、画像と名前部分をラップする別のフレックスボックスを作成し、使用する外側のフレックスボックスを作成することです

justifyContent: 'space-between'

予想されるレイアウトを作成します。

これは非常に一般的なUIパラダイムのように思えますが、ベストプラクティスは何でしょうか。どうもありがとうございました！

csscss3react-nativeflexbox
24
Martin Konicek

この素晴らしいガイドを使用して、一般的なFlexbox質問： https://css-tricks.com/snippets/css/a-guide-to-flexbox

擬似コード：

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <ProfilePicture />
  <Text style={{flex: 1}}>{username}</Text>
  <ScoreNumber />
</View>

これにより、3つの要素が隣り合ってレンダリングされ、Textが使用可能なすべてのスペースを占有するため、ScoreNumberが右側にプッシュされます。

9
Martin Konicek

これはあなたを助けます

.parent {
  display: flex;
}

.child2 {
  margin-left: auto;
}
<div class="parent">
  <div class="child1">left</div>
  <div class="child2">right</div>  
</div>
62
pradeep1991singh

つかいます justify-content: space-betweenプッシュエレメントを側面にプッシュします。

.flex {
 display: flex;
 justify-content: space-between;
}

.flex-grow {
  flex-grow: 1;
}

.one {
  border: 1px solid black;
  width: 20px; height: 20px;
}

.two {
  border: 1px solid black;
  width: 20px; height: 20px;
}

.three {
  border: 1px solid black;
  width: 20px; height: 20px;
}
Growing middle element
<div class="flex">
  <div class="one"></div><div class="two flex-grow"></div><div class="three"></div>
</div>

Without growing element
<div class="flex">
  <div class="one"></div><div class="two"></div><div class="three"></div>
</div>

Without middle element
<div class="flex">
  <div class="one"></div><div class="three"></div>
</div>

この素晴らしいチュートリアルを参照して、フレックスボックスの動作を簡単に理解してください。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

5
BitOfUniverse