2

I'm new to css and I want to let five boxes lined up horizontally in the top left corner and the last one stay in the bottom right corner even if you resize the browser.I try to use flex to do this but failed to make the F element in the right corner.Can you tell me how to do this?

#container {
    display: flex;
    flex-flow: row nowrap;
}

#A, #B, #C, #D, #E, #F {
    background: #eeeff2;
    width: 100px;
    height: 150px;
    border-left: 10px dotted #D0D0FF;
    margin-right:10px;
}

p {
    font-family: Tahoma, sans-serif;
    font-size:40px;
    padding-left: 10px;
}

#A:hover, #B:hover, #C:hover, #D:hover, #E:hover, #F:hover {
    background: yellow;
    cursor: pointer;
    color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="styleB.css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <div id="A">
                <p>A</p>
            </div>
            <div id="B">
                <p>B</p>
            </div>
            <div id="C">
                <p>C</p>
            </div>
            <div id="D">
                <p>D</p>
            </div>
            <div id="E">
                <p>E</p>
            </div>
            <div id="F">
                <p>F</p>
            </div>
        </div>
    </body>
</html>
ChufanSuki
  • 83
  • 1
  • 6

1 Answers1

3

You have to need set margin for last-child #F{ margin-left:auto; }

#container {
  display: flex;
  flex-flow: row nowrap;
}

#A,
#B,
#C,
#D,
#E,
#F {
  background: #eeeff2;
  width: 100px;
  height: 150px;
  border-left: 10px dotted #D0D0FF;
  margin-right: 10px;
}

#F {
  margin-left: auto;
}

p {
  font-family: Tahoma, sans-serif;
  font-size: 40px;
  padding-left: 10px;
}

#A:hover,
#B:hover,
#C:hover,
#D:hover,
#E:hover,
#F:hover {
  background: yellow;
  cursor: pointer;
  color: goldenrod;
}
<div id="container">
  <div id="A">
    <p>A</p>
  </div>
  <div id="B">
    <p>B</p>
  </div>
  <div id="C">
    <p>C</p>
  </div>
  <div id="D">
    <p>D</p>
  </div>
  <div id="E">
    <p>E</p>
  </div>
  <div id="F">
    <p>F</p>
  </div>
</div>
Momin
  • 3,200
  • 3
  • 30
  • 48
  • This [Scrimba](https://scrimba.com/course/gflexbox/enrolled) tutorial will help you to know details about CSS flexbox. – Momin Jul 03 '20 at 03:41
  • Thanks, it works. I have read the tutorial but what if I want to place the F element in the bottom right corner? – ChufanSuki Jul 03 '20 at 04:15
  • 1
    I use the `position: absolute;` and it works fine.Out of curiosity, can flex-box place the F element in the bottom right corner? – ChufanSuki Jul 03 '20 at 04:24
  • Yes ! `align-items` , `align-self` property and flex-direction will help you to position individual item – Momin Jul 03 '20 at 04:35