Javascript 嵌套flexbox列重叠_Javascript_Html_Reactjs_Css_Flexbox

Javascript 嵌套flexbox列重叠

javascript html reactjs css

Javascript 嵌套flexbox列重叠,javascript,html,reactjs,css,flexbox,Javascript,Html,Reactjs,Css,Flexbox,使用React和样式化组件，我遇到了一些相互重叠的元素：有三件事是重叠的，即：元素下面的填充与它下面的按钮重叠（按钮实际上是一个React路由器链接，因此是一个） “请求报价”链接与其下方的重叠从下面的代码中可以看出，和是（弹性柱）的子项。查看dev工具中的元素，我注意到这个div的高度比它的子元素加起来要短，所以不知何故它已经崩溃了（这是描述它的正确方式吗？）如果你看div的高度，上面提到的和实际上并不重叠我一直在寻找代码重叠的原因，但找不到类似的情况问题：有人能解释一下如何

使用React和样式化组件，我遇到了一些相互重叠的元素：

有三件事是重叠的，即：

元素下面的填充与它下面的按钮重叠（按钮实际上是一个React路由器链接，因此是一个
）


“请求报价”链接与其下方的
重叠


从下面的代码中可以看出，
和
是
（弹性柱）的子项。查看dev工具中的元素，我注意到这个div的高度比它的子元素加起来要短，所以不知何故它已经崩溃了（这是描述它的正确方式吗？）
如果你看div的高度，上面提到的
和
实际上并不重叠
我一直在寻找代码重叠的原因，但找不到类似的情况
问题：有人能解释一下如何正确显示这些元素吗？
这是上面图片的代码：
import React, { Component } from "react";
import styled from "styled-components";

const LITitle = styled.p`
  margin: 0;
  width: 60%;
`;

const LIValue = styled.p`
  margin: 0;
  text-align: right;
  width: 40%;
`;

const LI = styled.li`
  display: flex;
  margin: 0.2rem 0 0.2rem 0;
  flex-direction: row;
  flex-wrap: nowrap;

  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
`;

const UL = styled.ul`
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
`;

class List extends Component {
  renderListElements() {
    let listElements = this.props.data.map(item => (
      <LI>
        <LITitle>{item[this.props.titleKeyName]}</LITitle>
        <LIValue>{item[this.props.valueKeyName]}</LIValue>
      </LI>
    ));
    return listElements;
  }

  render() {
    return <UL>{this.renderListElements()}</UL>;
  }
}

export default List;`

import { Link } from "react-router-dom";
import styled from "styled-components";

...

export const ButtonLink = styled(Link)`
  background-color: #007ccc;
  border: none;
  border-radius: 5px;
  box-style: border-box;
  color: white;
  padding: 9px 15px 10px 15px;
  margin: 0 0 0.5rem 0;
  text-align: center;
  text-decoration: none;

  @media (min-width: 500px) {
    width: 9rem;
  }
`;

import React, { Component } from "react";
import styled from "styled-components";
import { ButtonLink } from "../../Style/Style";
import List from "../GenericComponents/List";

import CartItem from "./CartItem";

const CartHeaderContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 8px;
`;

const HeaderSubContainer = styled.div`
  flex-direction: column;

  @media (orientation: landscape) {
    flex-direction: row;
  }
`;

const H1 = styled.h1`
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
`;

const H2 = styled.h2`
  font-size: 1.1rem;
  margin: 0;
`;

const MainContentContainer = styled.div`
  background: #d1ecfe;
  display: flex;
  flex-direction: column;
`;

const MaxWidthWrapper = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 9px;
  width: 100%;

  @media (min-width: 600px) {
    width: 80%;
  }
`;

const P = styled.p`
  margin: 0;
`;

const SummaryContainer = styled.div`
  display: flex;
`;

class CartDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkout: false
    };
  }

  updateItems = cart_list => {
    this.props.setCartData(cart_list);
  };

  checkoutCart = () => {
    this.setState({ checkout: true });
  };

  renderContent = () => {
    if (!this.props.cartProducts.length) {
      return (
        <MaxWidthWrapper>
          <P>No items in shopping cart.</P>
        </MaxWidthWrapper>
      );
    } else {
      let cartItems = this.props.cartProducts.map(lot_group => (
        <CartItem lot_group={lot_group} updateItems={this.updateItems} />
      ));
      return (
        <React.Fragment>
          <CartHeaderContainer>
            <H1>Shopping cart</H1>
            <HeaderSubContainer>
              <List
                data={[
                  {
                    title: "Products in cart:",
                    value: this.props.cartProducts.length
                  },
                  { title: "Total price:", value: `€ 10000` }
                ]}
                titleKeyName="title"
                valueKeyName="value"
              />
              <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
                Request Quote
              </ButtonLink>
            </HeaderSubContainer>
            <H2>Products in cart:</H2>
          </CartHeaderContainer>

          {cartItems}

          <MaxWidthWrapper>
            <P>Total price: €{this.props.cartTotalPrice}</P>
            <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
              Request Quote
            </ButtonLink>
          </MaxWidthWrapper>
        </React.Fragment>
      );
    }
  };

  renderCartSummary = () => {
    return (
      <React.Fragment>
        <List />
        <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
          Request Quote
        </ButtonLink>
      </React.Fragment>
    );
  };

  render() {
    let content = this.renderContent();

    return <MainContentContainer>{content}</MainContentContainer>;
  }
}

export default CartDetail;


只粘贴了看起来很重要的代码，我将在下面发布完整的代码
按钮链接的代码

：

import React, { Component } from "react";
import styled from "styled-components";

const LITitle = styled.p`
  margin: 0;
  width: 60%;
`;

const LIValue = styled.p`
  margin: 0;
  text-align: right;
  width: 40%;
`;

const LI = styled.li`
  display: flex;
  margin: 0.2rem 0 0.2rem 0;
  flex-direction: row;
  flex-wrap: nowrap;

  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
`;

const UL = styled.ul`
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
`;

class List extends Component {
  renderListElements() {
    let listElements = this.props.data.map(item => (
      <LI>
        <LITitle>{item[this.props.titleKeyName]}</LITitle>
        <LIValue>{item[this.props.valueKeyName]}</LIValue>
      </LI>
    ));
    return listElements;
  }

  render() {
    return <UL>{this.renderListElements()}</UL>;
  }
}

export default List;`

import { Link } from "react-router-dom";
import styled from "styled-components";

...

export const ButtonLink = styled(Link)`
  background-color: #007ccc;
  border: none;
  border-radius: 5px;
  box-style: border-box;
  color: white;
  padding: 9px 15px 10px 15px;
  margin: 0 0 0.5rem 0;
  text-align: center;
  text-decoration: none;

  @media (min-width: 500px) {
    width: 9rem;
  }
`;

import React, { Component } from "react";
import styled from "styled-components";
import { ButtonLink } from "../../Style/Style";
import List from "../GenericComponents/List";

import CartItem from "./CartItem";

const CartHeaderContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 8px;
`;

const HeaderSubContainer = styled.div`
  flex-direction: column;

  @media (orientation: landscape) {
    flex-direction: row;
  }
`;

const H1 = styled.h1`
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
`;

const H2 = styled.h2`
  font-size: 1.1rem;
  margin: 0;
`;

const MainContentContainer = styled.div`
  background: #d1ecfe;
  display: flex;
  flex-direction: column;
`;

const MaxWidthWrapper = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 9px;
  width: 100%;

  @media (min-width: 600px) {
    width: 80%;
  }
`;

const P = styled.p`
  margin: 0;
`;

const SummaryContainer = styled.div`
  display: flex;
`;

class CartDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkout: false
    };
  }

  updateItems = cart_list => {
    this.props.setCartData(cart_list);
  };

  checkoutCart = () => {
    this.setState({ checkout: true });
  };

  renderContent = () => {
    if (!this.props.cartProducts.length) {
      return (
        <MaxWidthWrapper>
          <P>No items in shopping cart.</P>
        </MaxWidthWrapper>
      );
    } else {
      let cartItems = this.props.cartProducts.map(lot_group => (
        <CartItem lot_group={lot_group} updateItems={this.updateItems} />
      ));
      return (
        <React.Fragment>
          <CartHeaderContainer>
            <H1>Shopping cart</H1>
            <HeaderSubContainer>
              <List
                data={[
                  {
                    title: "Products in cart:",
                    value: this.props.cartProducts.length
                  },
                  { title: "Total price:", value: `€ 10000` }
                ]}
                titleKeyName="title"
                valueKeyName="value"
              />
              <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
                Request Quote
              </ButtonLink>
            </HeaderSubContainer>
            <H2>Products in cart:</H2>
          </CartHeaderContainer>

          {cartItems}

          <MaxWidthWrapper>
            <P>Total price: €{this.props.cartTotalPrice}</P>
            <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
              Request Quote
            </ButtonLink>
          </MaxWidthWrapper>
        </React.Fragment>
      );
    }
  };

  renderCartSummary = () => {
    return (
      <React.Fragment>
        <List />
        <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
          Request Quote
        </ButtonLink>
      </React.Fragment>
    );
  };

  render() {
    let content = this.renderContent();

    return <MainContentContainer>{content}</MainContentContainer>;
  }
}

export default CartDetail;

初始代码块的完整代码：

import React, { Component } from "react";
import styled from "styled-components";

const LITitle = styled.p`
  margin: 0;
  width: 60%;
`;

const LIValue = styled.p`
  margin: 0;
  text-align: right;
  width: 40%;
`;

const LI = styled.li`
  display: flex;
  margin: 0.2rem 0 0.2rem 0;
  flex-direction: row;
  flex-wrap: nowrap;

  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
`;

const UL = styled.ul`
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
`;

class List extends Component {
  renderListElements() {
    let listElements = this.props.data.map(item => (
      <LI>
        <LITitle>{item[this.props.titleKeyName]}</LITitle>
        <LIValue>{item[this.props.valueKeyName]}</LIValue>
      </LI>
    ));
    return listElements;
  }

  render() {
    return <UL>{this.renderListElements()}</UL>;
  }
}

export default List;`

import { Link } from "react-router-dom";
import styled from "styled-components";

...

export const ButtonLink = styled(Link)`
  background-color: #007ccc;
  border: none;
  border-radius: 5px;
  box-style: border-box;
  color: white;
  padding: 9px 15px 10px 15px;
  margin: 0 0 0.5rem 0;
  text-align: center;
  text-decoration: none;

  @media (min-width: 500px) {
    width: 9rem;
  }
`;

import React, { Component } from "react";
import styled from "styled-components";
import { ButtonLink } from "../../Style/Style";
import List from "../GenericComponents/List";

import CartItem from "./CartItem";

const CartHeaderContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 8px;
`;

const HeaderSubContainer = styled.div`
  flex-direction: column;

  @media (orientation: landscape) {
    flex-direction: row;
  }
`;

const H1 = styled.h1`
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
`;

const H2 = styled.h2`
  font-size: 1.1rem;
  margin: 0;
`;

const MainContentContainer = styled.div`
  background: #d1ecfe;
  display: flex;
  flex-direction: column;
`;

const MaxWidthWrapper = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 9px;
  width: 100%;

  @media (min-width: 600px) {
    width: 80%;
  }
`;

const P = styled.p`
  margin: 0;
`;

const SummaryContainer = styled.div`
  display: flex;
`;

class CartDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkout: false
    };
  }

  updateItems = cart_list => {
    this.props.setCartData(cart_list);
  };

  checkoutCart = () => {
    this.setState({ checkout: true });
  };

  renderContent = () => {
    if (!this.props.cartProducts.length) {
      return (
        <MaxWidthWrapper>
          <P>No items in shopping cart.</P>
        </MaxWidthWrapper>
      );
    } else {
      let cartItems = this.props.cartProducts.map(lot_group => (
        <CartItem lot_group={lot_group} updateItems={this.updateItems} />
      ));
      return (
        <React.Fragment>
          <CartHeaderContainer>
            <H1>Shopping cart</H1>
            <HeaderSubContainer>
              <List
                data={[
                  {
                    title: "Products in cart:",
                    value: this.props.cartProducts.length
                  },
                  { title: "Total price:", value: `€ 10000` }
                ]}
                titleKeyName="title"
                valueKeyName="value"
              />
              <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
                Request Quote
              </ButtonLink>
            </HeaderSubContainer>
            <H2>Products in cart:</H2>
          </CartHeaderContainer>

          {cartItems}

          <MaxWidthWrapper>
            <P>Total price: €{this.props.cartTotalPrice}</P>
            <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
              Request Quote
            </ButtonLink>
          </MaxWidthWrapper>
        </React.Fragment>
      );
    }
  };

  renderCartSummary = () => {
    return (
      <React.Fragment>
        <List />
        <ButtonLink to={`/${this.props.match.params.locale}/order/`}>
          Request Quote
        </ButtonLink>
      </React.Fragment>
    );
  };

  render() {
    let content = this.renderContent();

    return <MainContentContainer>{content}</MainContentContainer>;
  }
}

export default CartDetail;

import React，{Component}来自“React”；
从“样式化组件”导入样式化；
从“../../Style/Style”导入{ButtonLink}；
从“./通用组件/列表”导入列表；
从“/CartItem”导入CartItem；
const cartweadercontainer=styled.div`
显示器：flex；
弯曲方向：立柱；
填充：8px；
`;
const HeaderSubContainer=styled.div`
弯曲方向：立柱；
@媒体（方向：景观）{
弯曲方向：行；
}
`;
常量H1=styled.H1`
字体大小：1.3rem；
保证金：0.5雷姆0；
`;
常数H2=styled.H2`
字号：1.1rem；
保证金：0；
`;
const MainContentContainer=styled.div`
背景：#d1ecfe；
显示器：flex；
弯曲方向：立柱；
`;
const MaxWidthWrapper=styled.div`
框大小：边框框；
显示器：flex；
弯曲方向：立柱；
保证金：0自动；
填充：9px；
宽度：100%；
@介质（最小宽度：600px）{
宽度：80%；
}
`;
常量P=styled.P`
保证金：0；
`;
const SummaryContainer=styled.div`
显示器：flex；
`;
类CartDetail扩展组件{
建造师（道具）{
超级（道具）；
此.state={
结帐：假
};
}
updateItems=cart\u list=>{
this.props.setCartData（购物车列表）；
};
签出购物车=（）=>{
this.setState（{checkout:true}）；
};
renderContent=（）=>{
if（！this.props.cartProducts.length）{
返回(
 购物车中没有物品。
);
}否则{
让cartItems=this.props.cartProducts.map（lot\u group=>(
));
返回(
购物车
请求报价
购物车中的产品：
{cartItems}
 总价：€{this.props.cartotalprice}
请求报价
);
}
};
renderCartSummary=（）=>{
返回(
请求报价
);
};
render（）{
让content=this.renderContent（）；
返回{content}；
}
}
导出默认的详细信息；

我用

切换了React路由器链接元素，并以编程方式更改路由

现在已经没有重叠了

我使用了以下代码：

<Button
  onClick={() => {
    this.props.history.push(
      `/${this.props.match.params.locale}/order/`
    );
  }}
>
  Request quote
</Button>

{
这个。道具。历史。推(
`/${this.props.match.params.locale}/order/`
);
}}
>
请求报价

我用

切换了React路由器链接元素，并以编程方式更改路由

现在已经没有重叠了

我使用了以下代码：

<Button
  onClick={() => {
    this.props.history.push(
      `/${this.props.match.params.locale}/order/`
    );
  }}
>
  Request quote
</Button>

{
这个。道具。历史。推(
`/${this.props.match.params.locale}/order/`
);
}}
>
请求报价

例如，在JSFIDLE中粘贴生成的html和css是很难阅读的。例如，在JSFIDLE中粘贴生成的html和css是很难阅读的。