CODEWITHSUNDEEP
cssreactjsflexboxrowmultiple-columns
Nelson Silva
Nelson Silva

Reputation: 439

Cant apply column on row with flexbox

I want to achieve something like a row with columns inside and the content of those columns should be vertically placed.

Like this:

enter image description here

Im using react so I have various components. What I think thats right but keeps the "a" and "b" in the same row is:

.container {
    display: flex;
    flex-direction: row;
}

.content {
    display: flex;
    flex-direction: column;
}

container class:

const Field2 = (props) => {

    return (

        <div className={"container"}>
            {props.texturasEscolhidas.map(a => {

                return (
                        <Field2Content>
                            {a.labelNormalize}
                            {a.name}
                        </Field2Content>
                )
            })}
        </div>

    )
};

export default Field2;

content class:

const Field2Content = (props) => {
    return(
        <div className={"content "}>
                {props.children}
        </div>
    )
};

export default Field2Content;

Upvotes: 1

Views: 229

Answers (3)

Gerard
Gerard

Reputation: 15786

Almost right. I've made an example below and documented in the code. Hope this helps.

.container {
  display: flex;
  flex-direction: row;
  background-color: lightblue; /* for visibility */
  justify-content: space-around; /* spreads flex items horizontally */
}

.content {
  display: flex;
  flex-direction: column;
  background-color: lightgreen; /* for visibility */
  width: 10%;
  align-items: center; /* places paragraphs in the center horizontally */
  margin: 2em 0; /* for top and bottom */
}
<div class="container">
  <div class="content">
    <p>a</p>
    <p>b</p>
  </div>
  <div class="content">
    <p>a</p>
    <p>b</p>
  </div>
  <div class="content">
    <p>a</p>
    <p>b</p>
  </div>
  <div class="content">
    <p>a</p>
    <p>b</p>
  </div>
</div>

Upvotes: 3

webta.st.ic
webta.st.ic

Reputation: 5169

You can do something like this: Make a wrapper with items and display it with flexbox in a row and use space-around to get your design. Within the items you can put children (i took simply a span with a text) and display them in a column also with flexbox. Use align-items: center; to get your position.

Heres a helpful link about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Below the working snippet, hope this helps:

.wrapper {
  width: 500px;
  border: 2px solid black;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 20px;
}

.item {
  display: flex;
  flex-direction: column;
  border: 2px solid black;
  padding: 5px;
  width: 50px;
  align-items: center;
}
<div class="wrapper">
  <div class="item">
    <span>a</span>
    <span>b</span>
  </div>
  <div class="item">
    <span>a</span>
    <span>b</span>
  </div>
  <div class="item">
    <span>a</span>
    <span>b</spa>
  </div>
  <div class="item">
    <span>a</span>
    <span>b</span>
  </div>
</div>

Upvotes: 3

Athul Nath
Athul Nath

Reputation: 2606

Try this code

.container {
    display: flex;
    flex-direction: row;
    border: 3px solid;
    padding: 10px;
    justify-content: space-evenly;
}

.content {
    display: flex;
    flex-direction: column;
    border: 1px solid;
    padding: 10px;
    align-items: center;
}
<div class="container">
	<div class="content">
    	<div>A</div>
        <div>B</div>
    </div>
    <div class="content">
    	<div>A</div>
        <div>B</div>
    </div>
    <div class="content">
    	<div>A</div>
        <div>B</div>
    </div>
    <div class="content">
    	<div>A</div>
        <div>B</div>
    </div>
</div>

Upvotes: 2

Related Questions