2
votes

Comment centrer l'élément absolu avec flex?

J'ai le div principal qui est la position: relative; et les enfants qui est l'élément absolu Je veux les centrer horizontalement mais il se passe quelque chose d'étrange que je ne comprends pas.

Comment centrer un élément absolu horizontalement avec flex? une idée avec ça?

exemple d'image

  <div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>


    </div>
  </div>

body{
  background:tomato;
}
.block{
  position:relative;
  width:700px;
  background:white;
  padding:10px;
}
.block-item{
  width:60px;
  height:60px;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
}

.block-item:nth-of-type(1){
  left:0;
  background:lightgreen;
}
.block-item:nth-of-type(2){
  left:5%;
  top:25px;
  background:lightblue;
}
.block-item:nth-of-type(3){
  left:10%;
  background:lightgray;
}

html css flexbox css-position

3 commentaires

absolu avec flex -> pourquoi? quel est le but?

centrer correctement mon élément enfant

Flex ne correspond pas au positionnement absolu. Lorsque vous définissez absolu: position le contexte d'empilement est modifié et le conteneur flex ne l'affecte plus

7 Réponses :

2
votes

Mise à jour: vous pouvez également y parvenir en utilisant margin ou position relative

<div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>
    </div>
  </div>

body{
  background:tomato;
}
.block{
  position:relative;
  width:100%;
  background:white;
  padding:30px 10px 50px 10px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.block-item{
  width:60px;
  height:60px;
  position:relative;
}

.block-item:nth-of-type(1){
  background:lightgreen;
  left:0;
}
.block-item:nth-of-type(2){
    left: -2%;
    top: 20px;
    background: lightblue;
}
.block-item:nth-of-type(3){
  left: -5%;
  background:lightgray;
}

2 commentaires

mais j'ai besoin de mettre à gauche et d'en haut mes éléments enfants

pourriez-vous s'il vous plaît montrer un filaire ou quelque chose pour savoir à quoi il devrait ressembler?

0
votes

  <div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>


    </div>
  </div>

body{
  background:tomato;
}
.block{
  position:relative;
  width:700px;
  background:white;
  padding:10px;
}
.block-item{
  left: 50%;
  transform: translateX(-50%);
  width:60px;
  height:60px;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
}

.block-item:nth-of-type(1){
  background:lightgreen;
}
.block-item:nth-of-type(2){
  top:25px;
  background:lightblue;
}
.block-item:nth-of-type(3){
  background:lightgray;
}

0 commentaires

0
votes

Essayez ce Fiddle

.block{
 position:relative;
 width:700px;
 background:white;
 padding:10px;
 display:flex;
 align-items:center;
 justify-content:center;  
 }

0 commentaires

0
votes

Vous pouvez changer le CSS comme ci-dessous.

body{
    background:tomato;
}
.block{
    position:relative;
    width:100%;
    background:white;
    padding:10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.block-item{
    width:33%;
    height:60px;
    margin: 0 auto;
}

.block-item:nth-of-type(1){
    left:0;
    background:lightgreen;
}
.block-item:nth-of-type(2){
    left:5%;
    top:25px;
    background:lightblue;
}
.block-item:nth-of-type(3){
    left:10%;
    background:lightgray;
}

et il n'y a pas de changement dans le HTML

0 commentaires

0
votes

Supprimez simplement la position: absolue et utilisez position: relative et ajustez le coin supérieur gauche à droite et centrez votre div principal comme suit. J'espère que cette solution vous sera utile.

<div id="main">
    <div class="block">
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
    </div>
</div>

body {
    background: tomato;
}
.block {
    max-width: 700px;
    position: relative;
    padding: 10px;
    text-align: center;
    background: white;
}
.block-item {
    width: 60px;
    height: 60px;
    position: relative;
    display: inline-block;
    left: -15px;
    margin-bottom: 10px;
}
.block-item:nth-of-type(1) {
    left: 0;
    background: lightgreen;
}
.block-item:nth-of-type(2) {
    background: lightblue;
    top: 15px;
}
.block-item:nth-of-type(3) {
    background: lightgray;
    right: 30px;
    left: inherit;
}

0 commentaires

1
votes

Vous n'avez pas besoin d'une position absolue ici. Vous devez simplement ajuster une certaine marge pour obtenir cette mise en page:

<div id="main">
  <div class="block">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
  </div>
</div>

body {
  background: tomato;
}

.block {
  background: white;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-item {
  width: 60px;
  height: 60px;
}

.block-item:nth-of-type(1) {
  margin-right: -10px;
  background: lightgreen;
}

.block-item:nth-of-type(2) {
  margin-right: -10px;
  margin-top: 25px;
  background: lightblue;
}

.block-item:nth-of-type(3) {
  background: lightgray;
}

0 commentaires

1
votes

Utilisez position: relative au lieu de absolu et ajoutez flexbox à l'élément block . Ajustez également gauche en utilisant des pixels au lieu de pourcentages - voir la démo ci-dessous:

<div id="main">
  <div class="block">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
  </div>
</div>

body {
  background: tomato;
}

.block {
  position: relative;
  width: 700px;
  background: white;
  padding: 10px;
  display: flex; /* Flexbox here */
  justify-content: center;
}

.block-item {
  width: 60px;
  height: 60px;
  /*position: absolute;*/
  position: relative;
  /*display: flex;
  align-items: center;
  justify-content: center;*/
}

.block-item:nth-of-type(1) {
  left: 0;
  background: lightgreen;
}

.block-item:nth-of-type(2) {
  left: -20px; /* CHANGED */
  top: 25px;
  background: lightblue;
}

.block-item:nth-of-type(3) {
  left: -50px; /* CHANGED */
  background: lightgray;
}

0 commentaires