How do I center one flexbox item in a flex container that has more than one item

user_15966552 0
Viewed 44

The image below is what I'm currently working with. I have a flex container taking up the whole width of the screen (a div with the red border), that contains two flex items: one being the white square, and the other being another flex container (with the blue border) containing the buttons.

What I'm trying to do is center the white square horizontally on screen, and have it so that when the window/screen is resized the button container div won't collide/come into the white square. I'm not sure how to go about this, so any help would be appreciated. My code is below the image.

enter image description here

<div class="middle-content-section">
        <div class="drawing-pad-container"></div>
        <div class="settings-container">
            <button class="grid-toggle-button">Show grid</button>
            <button class="grid-toggle-button">Hover to draw</button>
        </div>
    </div>

.middle-content-section {
    margin-top: 50px;
    display: flex;
    gap: 50px;
    width: 100%;
    border: 1px solid red;
}

.settings-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid blue;
}

.drawing-pad-container {
    height: 500px;
    width: 500px;
    background: rgb(255, 255, 255);
    filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
    transition: 0.3s;
    display: grid;
    grid-template-rows: repeat(30, 1fr);
    grid-template-columns: repeat(30, 1fr);
    flex: 0 0 auto;
}
flexbox css html
2 Answers

If you are simply trying to centre the white square in the div all you really need are some margins.

margin: 0 auto;

So I modified my answer to hopefully better fit your request. It is a little hacky but does seem to work.

What I did was create one more container called items which holds both interior items. I then set an auto margin on the container to centre both the white box and then settings bar. The bar was given a fixed width of 100px and therefore I did a transform: translateX(100px) which will then shift everything over by 100px correcting for the width and therefore offset cause by the settings bar.

Below is a code snippet of the result with the change spaced out.

.middle-content-section {
    margin-top: 50px;
    display: flex;
    width: 100%;
    border: 1px solid red;
}

.items {
    margin: 0 auto;
    transform: translateX(100px);
    gap: 50px;
    display: flex;
}

.settings-container {
    
    width: 100px; 

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid blue;
}

.drawing-pad-container {
    height: 500px;
    width: 500px;
    background: rgb(255, 255, 255);
    filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
    transition: 0.3s;
    display: grid;
    grid-template-rows: repeat(30, 1fr);
    grid-template-columns: repeat(30, 1fr);
    flex: 0 0 auto;
}
<div class="middle-content-section">
    <div class="items">
        <div class="drawing-pad-container"></div>
        <div class="settings-container">
            <button class="grid-toggle-button">Show grid</button>
            <button class="grid-toggle-button">Hover to draw</button>
        
        </div>
    </div>
 </div>

user_109150180

ref: coryrylan.com

section {
  width: 200px;
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: center;
  align-items: center;
}
   <section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

enter image description here

user_125519250
Related