Is there a short hand method in CSS to combine
display:flex;
flex-direction: row / column?
into one line instead of two?
I know flex-flow, does flex-direction and flex wrap.
I don't know if you are versed in Sass, however if you are, this is a quick way on how to make your idea work, you could also polish this further whith #if statements and #error directives, but here's the quick and easy way:
Here's a Codepen to demonstrate.
The mixin:
#mixin fd($flex, $direction) {
display: $flex;
flex-direction: $direction;
}
This is how you include it:
#include fd([display], [direction]);
.flex-1 {
#include fd(flex, row);
// whatever goes next
}
.flex-2 {
#include fd(inline-flex, column);
// whatever goes next
}
This is what it compiles to:
.flex-1 {
display: flex;
flex-direction: row;
}
.flex-2 {
display: inline-flex;
flex-direction: column;
}
Related
I'm trying to style my react frontend for a project, and want the Form and Display components to be next to each other in a flex container. It works when I do an inline style as below, but has no effect when I use the App.css file. Could somebody explain this to me? Here is the project: https://github.com/GeorgeCGarman/tip-calculator-react
<div className="container" style={{ display: "flex" }}>
<Form />
<Display />
</div>
Your CSS syntax in App.css is incorrect, but you're on the right track.
Instead of:
.selectTip {
display: "flex";
flex-direction: "column";
}
.container {
display: "flex";
}
.Form {
display: "flex";
}
You need to remove the quote marks:
.selectTip {
display: flex;
flex-direction: column;
}
.container {
display: flex;
}
.Form {
display: flex;
}
CSS uses keywords, meaning they do not require quotes, but in React, it must be given as a string (or for things like padding, it may be given as a number)
CSS can be a minefield, so make sure you check out some kind of tutorial
I have a dropdown with span elements on desktop. I use CSS Flexbox to re-arrange order of the elements:
.parent {
display: flex;
flex-direction: column;
}
.child {
order: 0;
}
.child.disabled {
order: 1;
}
This works well - but on iOS the re-arrange doesnt work. Is it possible to target this as well, or does it needs to be done server-side?
I'm currently converting my sass styles to use css modules to avoid style conflicts. My understanding is that it generates unique class names, which makes it hard if I want to target another component (e.g. a child component) defined in a different file.
Say I have a component Button, and it imports from a Button.module.scss file:
// Button.js
import styles from "./Button.module.scss";
export const Button () => <button className={styles.button} />;
// Button.module.scss
.button {
// relevant styles.
}
Now I have another component ButtonGroup. Say I want to make the button in the group have margin between them, I would have something like this:
// ButtonGroup.module.scss
.buttonGroup {
display: flex
&[class~=horizontal] {
& > .button:not(:first-child) { // still using the same class name
margin-left: 1rem;
}
}
&[class~=vertical] {
flex-direction: column;
& > .button:not(:first-child) { // still using the same class name
margin-top: 1rem;
}
}
}
Notice I'm still using the .button to target the individual buttons. But this won't work because the child component doesn't actually have .button as its class name since it's a generated unique class name.
I could use something like [class^=Button] but that feels hacky and hard to maintain once you have a lot of components. (Also realized it wouldn't work in production.)
css-modules is not related to SASS or SCSS and has its own set of supported features and keywords. Yes, they can be used together, which I actually do in most my projects. But I avoid having classname dependencies between different files. I'm aware of some features that could be used to share classnames, but avoiding the need for it is probably the best solution. I will in the following section list all potential solutions to your conundrum I can think of; choose what suits you best:
Solution #1: Never sharing classnames, co-locating styles that belong together and operate on the same classnames.
In your case this would mean that you only have one scss file relating to buttons buttons.modules.scss and both Button.js and ButtonGroup.js import it.
Solution #2: exempt shared classnames from the unique generated name mechanism by marking them as :global. This can be done thus:
// button.module.scss
// this will stay a global classname
:global(.button) {
// the button styles
}
// this will be treated as usual, generating a local name
.icon {
// some icon stuff
}
// buttongroup.module.scss
.buttonGroup {
display: flex;
// will be resolved as local classname
&.horizontal {
flex-direction: row;
// will be resolved as global classname
& > :global(.button):not(:first-child) { margin-left: 1rem; }
}
&.vertical {
flex-direction: column;
& > :global(.button):not(:first-child) { margin-top: 1rem; }
}
}
Solution #3: accept anonymous children. You can omit the classname of the children. no one places non-buttons in a button group (might even enforce it in your component code).
// buttongroup.module.scss
.buttonGroup {
display: flex;
&.horizontal {
flex-direction: row;
& > *:not(:first-child) { margin-left: 1rem; }
}
&.vertical {
flex-direction: column;
& > *:not(:first-child) { margin-top: 1rem; }
}
}
Solution #4: Reference content from another file. There seems to be some support for a syntax that can reference/import stuff from other files, but I perused the documentation and a few github issue discussions 'import className from fileName' 'more' 'and more' without getting any clear answer as to how one would import a local classname from another file. There might be something possible either along those lines see here:
#import button from './button.module.scss';
.buttonGroup {
display: flex;
&.horizontal {
flex-direction: row;
& > .button:not(:first-child) { margin-left: 1rem; }
}
&.vertical {
flex-direction: column;
& > .button:not(:first-child) { margin-top: 1rem; }
}
}
...or along those lines see here:
:import("./button.module.scss") {
imported-button: button;
}
.buttonGroup {
display: flex;
&.horizontal {
flex-direction: row;
& > .imported-button:not(:first-child) { margin-left: 1rem; }
}
&.vertical {
flex-direction: column;
& > .imported-button:not(:first-child) { margin-top: 1rem; }
}
}
Solution #5: Have your container component add a class .button-group-item to each child and use it to apply the margins instead of the .button class.
Right-align from overflow text instead of its parent.
Here's my sample code:
https://stackblitz.com/edit/react-jjno6n
Further analysis, your CSS has an issue,
Change your CSS like the below
.CheckoutSteps {
/* display: inline-flex; */
/* align-items: center; */
align-items: flex-start;
display: flex;
justify-content: center;
}
Output
I would strongly recommend you to read this article
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I've created a hack for now LOL!
componentDidMount() {
this.checkMargin();
}
checkMargin() {
setTimeout(() => {
const paddingRight =
(document.querySelector(
".CheckoutSteps .Step:last-child .StepLabel span"
).clientWidth - 40) / 2;
document.querySelector(
".CheckoutSteps"
).style.paddingRight = `${paddingRight}px`;
}, 200);
}
Is this what you want to achieve my friend? The problem is that the container has a fixed size, I don't know if that is a requirement or just making the circle "circle".
https://stackblitz.com/edit/react-le2wxp
I am trying to validate a css file at w3c css validator. When it is tested it returns an error stating that "Property flex-wrap- doesn't exist : wrap". This is my part that css validator sees wrong.
.row {
width: 100%;
display: flex;
flex-wrap-: wrap;
}
Any suggestion how to solve this problem?
Thanks
flex-wrap- indeed doesn't exist...but flex-wrap exists. See documentation on Mozilla Developer Network
Replace your CSS with the following :
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}