Question 189693 in Html Question posted in
Some basic documentation can be found here.

Html – Flex box inside a box

I’m trying to fit a box inside a box, where the layout changes depending on the screen size e.g. if under 400px.

I’m having trouble at two points:

  1. Aligning the inner box to the centre right of the outer box and
  2. Using flexboxes to make the inner box into a ‘row’ and fall to the bottom of the outer box on smaller displays

Large display results

Small display results

<p class="inline-block-buttons">
  Text 1
  <a>Text 2</a>
</p>

p {
  border: 1px solid black;
  margin: 2rem 0;
  padding: 0.25rem;
}

a {
  padding: 1rem 2rem;
  border: 1px solid black;
  text-decoration: none;
  margin: 1rem;
  border-radius: 2px;
}

.inline-block-buttons a {
  display: inline-block;
  align-self: right;
}
body {
  margin: 2rem;
}
  @media (max-width: 500px) {
  .inline-block-buttons {
    flex-direction: column;
  }
Tags:

2

Answers


  1. 0 
    p {
  border: 1px solid black;
  margin: 2rem 0;
  padding: 1rem 2rem;
  display:flex;
  align-items: center;
  border-radius: 10px;
}

a {
  padding: 1rem 2rem;
  border: 1px solid black;
  text-decoration: none;
  margin: 1rem;
  border-radius: 10px;
}

.inline-block-buttons a {
  margin-left: auto;
}

body {
  margin: 2rem;
  flex-direction: column;
  font-weight: bold;
}
@media (max-width: 500px) {
  .inline-block-buttons {
    flex-direction: column;
  }
  .inline-block-buttons a{
    margin: 1rem;
  }
}
    <body>
<p class="inline-block-buttons">
  Text 1
  <a>Text 2</a>
</p>
</body>
    Login or Signup to reply.
  2. 0

    Try this :

    div.inline-block-buttons {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    flex-wrap: wrap;
}

.inline-block-buttons {
    border: 1px solid black;
    border-radius: 10px;
    padding: 15px 100px;
}


@media (max-width: 500px) {
  .inline-block-buttons {
    flex-direction: column;
    text-align: center;
  }
  .inline-block-buttons p {
    margin-bottom: 50px;
  }
}
     <div class="inline-block-buttons">
        <p>Text 1</p>
        <a class="inline-block-buttons">Text 2</a>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search