What is the best way to combine flex-direction and flex-wrap in one row?

I'm working with a React component that looks like this:

<Card className='form-margin width card' zDepth='3'>
    <CardText>
        <strong>Test</strong><br />
        This is some text
    </CardText>
    <CardActions>
        <FlatButton label="Edit" />
        <FlatButton label="Delete" />
    </CardActions>

</Card>

<Card className='form-margin width card' zDepth='3'>
    <CardText>
        <strong>Test</strong><br />
        This is some text
    </CardText>
    <CardActions>
        <FlatButton label="Edit" />
        <FlatButton label="Delete" />
    </CardActions>

</Card>

Here's the CSS in use:

.form-margin {
  margin: 10px;
}

.pitch-width {
  width: 40%;
}

I want to align these cards in the same row and apply flex-direction and flex-wrap, following this guide: (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

I attempted to do so by adding this code:

.card {
  flex-direction: row;
}

Unfortunately, it didn't have any effect. Can you help me figure out how to achieve this?

cssreact-nativeflexboxreact-native-flexbox

Answer №1

For a definitive solution to your query, to access the CSS styles related to flexbox, you must designate the display context as display: flex. This will allow all descendants of that element to follow flex behavior and utilize flex styling.

In the specific scenario you described, it appears essential for the parent element to have display: flex, and then ensure the relevant children, such as .card, have the appropriate flex-direction property applied.

Answer №2

To properly structure your layout, you should create an outer box that wraps around both cards and utilize the following CSS:

.outer-box {
  display: flex;
}


.outer-box {
  display: flex;
}

.form-margin {
  margin: 10px;
}

.pitch-width {
  width: 40%;
}

.card {
  flex-direction: row;
}
<div class="outer-box">
  <div class='form-margin width card'>
    <div>
      <strong>Test</strong><br /> This is some text
    </div>
    <div>
      <span>Edit</span>
      <span>Delete</span>
    </div>

  </div>

  <div class='form-margin width card'>
    <div>
      <strong>Test</strong><br /> This is some text
    </div>
    <div>
      <span>Edit</span>
      <span>Delete</span>
    </div>

  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for incorporating scrolling into a sub menu

I'm currently attempting to incorporate vertical scroll only for my sub-menu using CSS, without including a horizontal scroll. However, the issue arises when I remove the horizontal scroll - it causes the nested sub-menu within the initial one to bre ...

htmlcsswordpressmenu

The absence of ellipses in Typography MUI is a glaring omission

I'm looking to truncate long text with an ellipsis, but it doesn't seem to be working. Is there something wrong with my code or how can we improve it? CODESANDBOX -----> CLICK HERE <Typography variant="body2" color="blac ...

cssreactjsmaterial-ui

Is there a way to send the image object to the onclick function as it is being assigned?

I apologize if my question is a bit unclear, as I am currently teaching myself how to use javascript. I am working on generating image thumbnails dynamically and would like the ability for users to enlarge the image when they click on the thumbnails. The p ...

javascripthtmlcss

What is the best way to read a local text file and store its contents in a string variable within a

Within my ReactNative project, I am seeking to retrieve the content of static text files and store it in a string variable. Here is an example of how I would like to achieve this: var content = loadPlainTextFile("resources/tags.txt"); var tags = content.s ...

javascriptreactjsreact-native

Is there a way to include a tag as an argument in a scss mixin?

Currently, I am working on a mixin that will target a specific child element within a parent. For instance, my goal is to target all <a> tags within a parent element that also has a parent of section---blue. I initially thought that passing the tag ...

csssassscss-mixins

Ensure that the footer remains at the bottom of the webpage, without being positioned as fixed

I am encountering an issue on my work2 Website where the footer is not staying at the bottom of the page when there is limited content. I have searched extensively on Google, YouTube, and CSS tricks for a solution, but have not found one that works for my ...

htmlcss

The window.addEventListener function is failing to work properly on mobile devices

Hey there! I am facing an issue in my JS code. I wrote this code because I want the menu to close when a visitor clicks on another div (not the menu) if it is open. The code seems to be working fine in developer tools on Chrome or Firefox, but it's no ...

javascriptjquerycssresponsive-designmenu

Creating an Unordered List in GWT that Includes List Items

I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this: <div class="topbar"> <div class="container fixed"> <h3> <a href="" class="logo">test& ...

htmlcssgwttwitter-bootstrap

What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumb ...

javascripthtmlcssbootstrap-4

Tips for retrieving the tenth document in Firestore Query using JavaScript

Specifically, a selection of the arranged files. Here's my thought, although I know it can be improved: firestore().collection("queue").orderBy("order_id", "asc").limit(3,5) If anyone has a better solution, I would appre ...

javascriptnode.jsfirebasereact-nativegoogle-cloud-firestore

What causes materialui styles to vanish upon refreshing in nextjs?

After consulting the materialui documentation (https://material-ui.com/guides/server-rendering/), I was able to find a solution, but I am still unsure of the underlying reason. Why does the style work initially during rendering but disappear upon subs ...

cssmaterial-uinext.jsserver-side-rendering

How to customize the background of radio buttons in HTML

I want the background color to stay consistent as lightgray for each <ul>. Currently, clicking the radio button causes the ul's background to change incorrectly. I am unsure of how to loop through all available ul elements using jQuery and woul ...

javascripthtmljquerycss

What is the best way to make a child div's height match its parent's height?

I am facing an issue with aligning 2 divs on the same line, separated by a vertical line while ensuring that the line always has the height of the parent div. Despite trying various solutions suggested online, none seem to work for me. I cannot use positi ...

htmlcss

SASS fails to recognize the variable

I am trying to incorporate borders based on specific @media breakpoints. Here is the code I have written: @media(max-width:767px) { $height: auto; $grid: 1; } @media(min-width: 768px) and (max-width:991px) { $height: 370px; $grid: 2; } @media(min-width: 9 ...

csssass

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

javascriptjqueryhtmlcssdirectory

Having difficulty deleting an entry from a flatList in a React Native component when using the filter method

I'm currently facing an issue with deleting an item from my flatlist in React Native. I've been attempting to use the filter method to exclude the list item with the ID entered by the user for deletion, but it's not working as expected. I&ap ...

javascriptarraysreactjsreact-native

Creating a rotating circle in CSS with ion-slides: A step-by-step guide

Hello, I am attempting to develop a circular object that will rotate in the direction it is dragged. Within this circle, there are elements positioned along the border so that these elements also spin accordingly. To illustrate, below are the specific elem ...

htmlcssangularionic-frameworkionic4

Issue with transforming rotation in Quirks mode

Currently, I'm developing a website in quirks mode which does not allow the use of . In my project, I am facing an issue where CSS3 translate image is not working in IE10 and 11, although it works fine in IE9 due to the limitations mentioned above. Is ...

cssdoctypecss-transformsquirks-mode

When inserting a page break after a section, it seamlessly flows to the next page during printing

When should the CSS properties page-break-after: always or before be used? I have tried various methods, such as creating different div elements for page-break, adjusting float and clear:both, but have not had any success. There are currently four section ...

htmlcssgoogle-chrome

Unable to set items as sticky within mat-tabs

Is there a way to make my image stick in place using the following CSS code? position: -webkit-sticky; position: sticky; top: 1px; I have tried implementing it but haven't been successful. HTML: <mat-tab-group class="user-tabs" (selectedTa ...

cssangularangular-materialmat-tab