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

Html – How do I add a border between two flex items?

I’m trying to add a border between two row flex items, however whenever I add one, the flex items stay in top of eachother instead of being next to eachother, here is an example:

This is how I want it to look. (line was drawn in paint, not a real thing)

https://i.sstatic.net/M6PQW26p.png

This is what I get.

https://i.sstatic.net/JkcXXx2C.png

<body>
    <div class="flex-container">
        <div class="flex-item1">
            <p>Flex content</p>
        </div>
        <div class="flex-item2">
            <p>Flex content</p>
        </div>
    </div>
</body>

.flex-container {
    display: flex;
    overflow: hidden;
    flex-flow: row wrap;
    height: 100vh;
    .flex-item1 {
        flex: 1 50%;
        background-color: aqua;
        border: 1px solid black;
    }
    .flex-item2 {
        flex: 1 50%;
        background-color: white;
    }
}
Tags:

3

Answers


  1. 0

    Because by default your flex elements have box-sizing: content-box; and border adds up to 50% of your 2px.
    I advise you to always start with * { box-sizing: border-box }:

    * {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  overflow: hidden;
  flex-flow: row wrap;
  height: 100vh;
}

.flex-item1 {
  flex: 1 50%;
  background-color: aqua;
  border: 1px solid black;
}

.flex-item2 {
  flex: 1 50%;
  background-color: white;
}
    <div class="flex-container">
  <div class="flex-item1">
    <p>Flex content</p>
  </div>
  <div class="flex-item2">
    <p>Flex content</p>
  </div>
</div>

    If you intentionally want to use box-sizing: content-box; then do this:

    .flex-container {
  display: flex;
  overflow: hidden;
  flex-flow: row wrap;
  height: 100vh;
}

.flex-item1 {
  flex: 1 calc(50% - 2px); /* <--- */
  background-color: aqua;
  border: 1px solid black;
}

.flex-item2 {
  flex: 1 50%;
  background-color: white;
}
    <div class="flex-container">
  <div class="flex-item1">
    <p>Flex content</p>
  </div>
  <div class="flex-item2">
    <p>Flex content</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Remove flex-flow: row wrap; and use border-right instead of border

    .flex-container {
  display: flex;
  overflow: hidden;
  height: 100vh;
  .flex-item1 {
    flex: 1 50%;
    background-color: aqua;
    border-right: 1px solid black;
  }
  .flex-item2 {
    flex: 1 50%;
    background-color: white;
  }
}
    <div class="flex-container">
  <div class="flex-item1">
    <p>Flex content</p>
  </div>
  <div class="flex-item2">
    <p>Flex content</p>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    If you want to place items in row you can either give border-right to the first item or border-left to the second item.

    Similarly if you want to place them in flex-direction: ‘column’, you can either give border-bottom to the first item or border-top to the second item.

    Also as someone has mentioned it below, you need to change box-sizing to border-box

    Hope this helps.

    Reason why i didn’t write code is that i want you to do it on your own!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search